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UMA BREVE 
HISTORIA 


Nos nao podemos come^ar a falar sobre HTML e CSS sem contar uma breve 
historia sobre o inicio de tudo. 

Nao sei quanto tempo voce trabalha com web e nao sei qual seu conhecimento 
sobre historia da internet, mas saiba que nunca foi tao facil desenvolver para 
web como e hoje. Nos produzimos websites acessiveis hoje por que ocorreram 
uma serie de movimentos independentes entre os fabricantes de browsers e 
alguns profissionais da area que quebraram barreiras importantes. 

Antes nossa preocupa^ao rondava apenas o Internet Explorer 3+ e o Netscape. 
Estes dois navegadores davam mais problemas de compatibilidade do que 
todos os problemas de compatibilidades dos browsers atuais, combinados. 

Fazer websites com tabela foi um marco para a historia do desenvolvimento 
web mas tambem o inicio dos nossos problemas. 

Mas nao da para negar que criar websites utilizando tabelas nos trouxe 
possibilidades interessantes, como por exemplo, criar websites com colunas. 
Uma maravilha! Imagine so: se antes podiamos apenas inserir texto corrido, 
centralizado, com alguns gifs animados, agora podiamos dividir o layout 
em colunas e fazer diagramacjoes matadoras e sofisticados para a epoca. Um 
verdadeiro avan<;o. Estamos falando de algo em torno de 1998. 


Mesmo com essas novas possibilidades, descobrimos cedo que desenvolver 
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websites utilizando tabelas e muito complicado. Ainda mais quando utilizamos 
o CSS da maneira errada. Naquele tempo era normal misturar o CSS com o 
HTML. Foi dai que o termo Tag Soup surgiu. 

Era muito codigo! Desenvolvedores aninhavam tabelas como se nao houvesse 
o dia de amanha. Uma loucura. 

O codigo ficava enorme, fazendo que com o download da pagina demorasse, 
a manuten<;ao era terrivel e o know-how de como o desenvolvimento foi feito 
era restrito a alguns profissionais da equipe. Era tudo muito inflexivel. Isso 
encarecia a mao de obra e por isso os projetos ficavam cada vez mais caros. 

Lembre-se que alem de tudo isso havia a guerra dos browsers. Os problemas 
de compatibilidade de codigo entre os dois browsers eram tao terriveis que 
for^avam o desenvolvedor a criar duas versoes de sites para abranger os 
usuarios dos dois navegadores. 

A Netscape e a Microsoft tinham uma mente predatoria. Cada um tentava 
ganhar os usuarios de forma nada honrosa. Para conseguir tal fa<;anha era 
facil: bastasse fazer com que os desenvolvedores fizessem websites compativeis 
apenas para um browser, fazendo com que o concorrente ficasse as moscas. 
Por isso que faziamos duas versoes para cada site, para cada script, para cada 
HTML. 

Essa novela durou longos anos ate que um grupo de profissionais gringos 
decidiram criar um movimento chamado Web Standards Project - WaSP. 
O desenvolvimento web estava sendo massacrado por causa dessa guerra 
entre os browsers. O WaSP tinha um objetivo muito claro: fazer com que os 
browsers e os desenvolvedores seguissem os padroes web recomendados pelo 
W3C. 

O Tim Berners-Lee, o inventor da Web, fundou a World Wide Web Consortium 
- W3C - para recomendar, criar e manter padroes tecnologicos baseados na 
web que fossem interoperaveis, abertos e acessiveis. Essas tecnologias devem 
ser manipuladas para a criac^ao de designs inovadores e tambem para a 


16 


Uma breve historia 


produ^ao de sistemas avan^ados baseados na internet. 

A perseveran^a deste grupo fez com que os fabricantes de browsers ouvissem 
suas ideias e suportassem as tecnicas e ideias do W3C. Hoje os browsers 
suportam os padroes web de forma que antes nunca imaginavamos. Isso e 
bom para todos nos. 

Atualmente o objetivo e fazer com que os desenvolvedores estudem e adotem 
a implementa<;ao dos padroes web de forma inteligente. 

Ainda ha muito o que fazer, principalmente aqui no Brasil. Mas estamos 
vivendo um cenario muito propicio ao crescimento avan^ado das tecnicas 
de desenvolvimento web. Mais desenvolvedores estao engajados a ensinar, 
sugerir e fazer com que o mercado de web cres^a de forma inteligente. Se 
voce esta lendo este livro, voce e a prova de que o interesse em uma web mais 
criativa tem aumentado. 

“If not now, when? If not you, who?” WaSP Team. 
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AS 3 CAMADAS DE 
DESENVOLVIMENTO 


O desenvolvimento client-side e baseado em 3 camadas principals: informa^ao, 
formata<;ao e comportamento. 

As camadas possibilitam o desenvolvimento independente de cada area da 
produ<;ao. Se quisermos modificar o design, podemos faze-lo manipnlando 
apenas o CSS, sem se preocupar com HTML, Javascript ou programa^ao 
server-side. 

Embora sejam independentes, a evolu^ao de cada camada influencia o 
caminho da outra. O CSS nao consegue evoluir se o HTML manter-se 
congelado no tempo. Um dos principals problemas quando desenvolviamos 
com tabelas era a mistura da formata^ao com a informa^ao. O codigo HTML 
estava tao entrela<;ado com o codigo CSS que a manipula<;ao do layout se 
tornava trabalhosa e muito cara. Nao era possivel modificar colunas de lugar, 
caracteristicas de textos ou ate mesmo tamanho dos elementos sem ter que 
modificar alguma coisa do codigo HTML. Nada era independente. Esse era 
um dos motivos que encareciam os projetos para web. Fazer um site entre os 
anos de 96 e 2001 nao era coisa facil. 
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Primeira camada: Informaqao 

A camada de informa^ao e a mais importante. Ela vem antes de todas as 
outras e fica sob o controle do HTML. O HTML marca a informa^ao 
dando-lhe significado. Esse significado e reconhecido por robos, sistemas, 
aplica^oes ou outros meios que podem acessar e reutilizar a informa^ao 
publicada. A informa^ao precisa ser acessivel a qualquer hora, de qualquer 
lugar e principalmente, por qualquer dispositivo e meio de acesso. Como ja 
dizia o antigo ditado do desenvolvimento web: O conteudo e o Rei. Mas o que 
e conteudo? O que e informaipao? 

Informa<;ao e tudo o que o usuario consome. 

A Web foi criada para compartilhar informac^ao. Desde o inlcio, quando 
a internet foi planejada e criada, seu objetivo era claro: compartilhar 
informa^ao com pessoas do mundo inteiro, de forma rapida e dinamica. 
A informa^ao que trafega na web deve ser reutilizada quantas vezes for 
necessario. Tambem e importante que a informa^ao seja portavel, de forma 
que ela nao seja acessivel por apenas um meio. 

Entendendo o significado das coisas 

Nos, seres humanos, entendemos o significado de cada elemento facilmente. 
Sabemos que um titulo e diferente do paragrafo por causa das suas 
caracteristicas visuais: tamanho de fonte, quantidade de caracteres, escrita 
e etc... 

As maquinas (e quando digo maquinas, quero abranger sistemas de busca, 
leitores de tela, smartphones, browsers, aplica^oes, sistemas, etc. Em 
suma, qualquer meio de acesso) nao tern esse discernimento. Os robos de 
sistemas de busca, por exemplo, nao enxergam. Eles nao tem como entender 
visualmente o que e um titulo, um paragrafo, uma imagem etc. Essa e a 
importancia da marca<;ao HTML: ela define o que e cada informa<;ao. 
Tenha em mente que o HTML deve ser sempre a primeira camada. Se 
todas as outras camadas nao funcionarem por algum motivo, o HTML 
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deve funcionar. A informacao deve ser entregue, nao importa se o visual 
tenha sido prejudicado por falta do CSS ou se o Javascript esta desligado no 
browser do usuario. 


Segunda camada: Formataqao 

A segunda camada e responsavel por controlar o visual da informacao exibida 
pelo HTML. E esta camada que deixa tudo bonito. Que faz vender. Que enche 
os olhos do cliente. Atualmente essa camada e controlada pelo CSS e parece 
que sera por muito tempo ainda. 

O CSS e a linguagem responsavel por controlar o visual da informacao 
exibida pelo HTML. O CSS formatara o conteudo de forma que seja 
visualmente agradavel em qualquer meio de acesso. A informacao e acessada 
por diferentes meios de acesso, desde sistemas de busca ate aparelhos 
como tablets, smartphones etc e o CSS e o responsavel por formatar a 
informacao para que ela seja consumida em qualquer meio de acesso 
de forma simples. Se voce estiver usando um leitor de tela, o CSS podera 
controlar a maneira com que a voz do leitor saira pelas caixas de som. 
Controlamos tambem a forma com que a informacao e mostrada em TVs ou 
outros aparelhos. Controlamos como o texto sera exibido em uma impressao. 

Quero que voce abra sua mente quando ler em uma mesma frase as palavras CSS 
e formatacao. Formatacao com CSS quer dizer muito mais do que pintar divs, 
formatar letras e cores. Se a informacao deve ser acessada em qualquer lugar, o 
CSS precisa cuidar para que essa informacao apareca de maneira adequada em 
cada um destes meios de acesso. Essa e sua principal responsabilidade. 

Vamos ver mais sobre a responsabilidade do CSS e alguma tecnicas nos 
capitulos posteriores. 
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Terceira camada: Comportamento 

Nessa terceira camada voce decidira quais serao os comportamentos 
dos elementos. O Javascript ate hoje e o principal responsavel por essa 
camada. Com o Javascript voce definira se os elementos serao arras- 
tados, dimensionados, rotacionados, reformatados etc. O Javascript 
controla tudo isso manipulando as caracteristicas dos elementos pelo 
CSS. Resumidamente, o Javascript controla os valores definidos pelo CSS 
e manipula estas propriedades. 

Voce vera no decorrer deste livro que o HTML5 trouxe muitas ferramentas 
e possibilidades para que o Javascript controle os elementos criados no 
codigo utilizando as novas APIs do HTML5 

Nessa camada nao importa se voce utilizara Javascript ou se intermediara seu 
codigo com um framework como o JQuery. 

O CSS tambem esta com um pe nessa camada. Com o CSS3 podemos controlar 
comportamentos simples dos elementos, come^ando com animates e 
transi^oes. Mesmo assim o CSS nao sera (talvez) uma ferramenta para fazer 
animates complexas como as animates que fazemos com SVG ou Canvas. 
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De acordo com o W3C a Web e baseada em 3 pilares: 

• Um esquema de nomes para localiza^ao de fontes de informa^ao na Web, 
esse esquema chama-se URI. 

• Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. 

• Uma linguagem de Hypertexto, para a facil navega<;ao entre as fontes de 
informa^ao: o HTML. 

Vamos nos focar no terceiro pilar, o HTML. 

HTML e uma abrevia^ao de Hypertext Markup Language, que traduzindo 
para o portugues significa Linguagem de Marca^ao de Hypertexto. Resumindo 
em uma frase: o HTML e uma linguagem para publica^ao de conteudo (texto, 
imagem, video, audio e etc) para a Web. 

Para entender melhor como o HTML funciona, vamos conversar sobre duas 
palavras que fazem parte do seu nome: Markup (marca<;ao) e Hypertext 
(hipertexto). 
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Hipertexto 

O HTML e baseado no conceito de Hipertexto, que e uma forma de organizar 
conteudo de forma nao linear. Hipertexto sao conjuntos de elementos - ou nos 
- ligados por conexoes. Estes elementos podem ser palavras, imagens, videos, 
audio, documentos etc. Estes elementos conectados formam uma grande rede 
de informa^ao. Eles nao estao conectados linearmente como se fossem textos 
de um livro, onde um assunto e ligado ao outro seguidamente. A conexao feita 
em um hipertexto e algo imprevisto que permite a comunica^ao de dados, 
organizando conhecimentos e guardando informa^oes relacionadas. 

Quando a web foi criada, era necessario distribuir a informa<;ao de uma 
maneira simples mas organizada, era necessario entao haver uma linguagem 
que fosse entendida universalmente por diversos meios de acesso. O HTML 
se propoe a ser esta linguagem. Desenvolvido originalmente por Tim Berners- 
Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido 
por Marc Andreessen na decada de 1990 - ganhou for^a. A partir dai, 
desenvolvedores e fabricantes de browsers utilizaram o HTML como base, 
compartilhando as mesmas conven<;6es e seus conceitos. 

O comego e a interoperabilidade 

Entre 1993 e 1995, o HTML ganhou as versoes HTML+, HTML2.0 e HTML3.0, 
onde foram propostas diversas mudan<;as para enriquecer as possibilidades da 
linguagem. Ate aqui o HTML ainda nao era tratado como um padrao. Apenas 
em 1997, o grupo de trabalho do W3C responsavel por manter o padrao do 
codigo, trabalhou na versao 3.2 da linguagem, fazendo com que ela fosse tratada 
como pratica comum. Voce pode ver: http://bit.ly/ol3anl. 

Desde o comedo o HTML foi criado para ser uma linguagem independente de 
plataformas, browsers e outros meios de acesso. Interoperabilidade significava 
menos custo. Voce cria apenas um codigo e este codigo pode ser lido por 
diversos meios, ao inves de versoes diferentes para diversos dispositivos. Dessa 
forma, evitou-se que a Web fosse desenvolvida em uma base proprietaria, 
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com formatos incompativeis e limitada. 

Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, 
fazendo com que a informa<;ao publicada por meio deste codigo fosse acessivel 
por dispositivos e outros meios com caracterlsticas diferentes, nao importando 
o tamanho da tela, resolu<;ao, varia^ao de cor. Dispositivos proprios para 
deficientes visuais e auditivos ou dispositivos moveis e portateis. O HTML 
deve ser entendido universalmente, dando a possibilidade para a reutiliza<;ao 
dessa informa^ao de acordo com as limita^oes de cada meio de acesso. 


Marcacao 

Ao ler um livro ou uma revista, voce consegue distinguir tltulos de paragrafos 
porque voce e um ser humano. Voce sabe que os titulos tern letras maiores, 
poucas palavras etc... Ja o paragrafo tern um numero maior de palavras e a sua 
letra e menor. Essa distin^ao e clara e muito obvia visualmente. 

A web nao e apenas acessada por seres humanos. A informa^ao publicada e 
totalmente reutilizada pelos meios de acesso. Os meios de acesso sao qualquer 
coisa que acesse a web e consuma seu conteudo. Pode ser os sistemas de busca, 
seu browser, um leitor de tela, seu smartphone, ou qualquer outro sistema 
ou dispositivo utilizado pelos usuarios ou robos. Estes meios de acesso nao 
conseguem distinguir visualmente os elementos exibidos na tela. E por isso 
que o HTML e baseado em marca^ao. 

Nos marcamos a informa^ao, dando significado a estes objetos, tornando-os 
legiveis para os meios de acesso. Assim, quando marcamos um titulo com hi, 
h2 ou h3, indicamos para os meios de acesso que determinado bloco de texto 
e um titulo, com uma determinada importancia e assim por diante com os 
outros elementos. 

Dessa forma cada meio de acesso pode decidir o que fazer com esta informa^ao. 
O browser, por exemplo, carrega a informa^ao na tela do usuario. Ja o robo do 



HTML5 e CSS3 com Farinha e Pimenta 


Google guarda a informa^ao e a utiliza em suas buscas. Cada meio de acesso 
tern sua fun<;ao, logo, utiliza a informa^ao de maneiras diferentes. 

Dai vem a importancia da semantica no codigo HTML. Se voce marca um 
titulo com um elemento que nao e da familia de titulos, os meios de acesso 
tratarao essa informa^ao de maneira errada. Nao importa se voce formate 
esse elemento de maneira que ele se pare^a com um titulo visualmente. O que 
importa mesmo e o que esta escrito no codigo. 


O INICIO DO HTML5 

WHAT Working Group 

Enquanto o W3C focava suas aten$oes para a cria<;ao da segunda versao 
do XHTML, um grupo chamado Web Hypertext Application Technology 
Working Group ou WHATWG trabalhava em uma versao do HTML que 
trazia mais flexibilidade para a produ<;ao de websites e sistemas baseados na 
web. 

O WHATWG1 foi fundado por desenvolvedores de empresas como 
Mozilla, Apple e Opera em 2004. Eles nao estavam felizes com o caminho 
que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas 
organizacjoes se juntaram para escrever o que seria chamado hoje de HTML5. 
Entre outros assuntos o WHATWG se focava em um padrao chamado Web 
Forms 2.0, que se propunha a modificar os formularios do HTML, ele foi 
incluido no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto. 

Por volta de 2006, o trabalho do WHAT WG passou a ser conhecido pelo mundo 
e principalmente pelo W3C - que ate entao trabalhavam separadamente - que 
reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners- 
Lee anunciou que trabalharia juntamente com o WHATWG na produ<;ao do 
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HTML5 em detrimento do XHTML 2. Mesmo assim o XHTML seria mantido 
paralelamente de acordo com as mudan^as causadas no HTML. O grupo que 
estava cuidando especificamente do XHTML 2 foi descontinuado em 2009. 

A participa<;ao no grupo que decide estes padroes e livre e voce pode se 
inscrever na lista de email2 para contribuir. Sugiro fortemente que voce fa(;a 
isso. Voce estara bebendo direto da fonte e podera contribuir diretamente 
para a cria^ao de uma Web mais livre e flexivel. 


HTML5 E SUAS MUDANQAS 

Quando o HTML4 foi lan^ado, o W3C alertou os desenvolvedores sobre 
algumas boas praticas que deveriam ser seguidas ao produzir codigos client- 
side. Desde este tempo, assuntos como a separa^ao da estrutura do codigo com 
a formata<;ao e principios de acessibilidade foram trazidos para discussoes e a 
aten$ao dos fabricantes e desenvolvedores. 

O HTML4 ainda nao trazia diferencial real para a semantica do codigo. o 
HTML4 tambem nao facilitava a manipula<;ao dos elementos via Javascript ou 
CSS. Se voce quisesse criar um sistema com a possibilidade de Drag’n Drop 
de elementos, por exemplo, era necessario criar um grande script, com bugs e 
que muitas vezes nao funcionavam de acordo em todos os browsers. 


O que e o HTML5? 

O HTML5 e a nova versao do HTML4. Enquanto o WHATWG define as 
regras de marca^ao que usaremos no HTML5 e no XHTML, eles tambem 
definem APIs que formarao a base da arquitetura web. 

Um dos principals objetivos do HTML5 e facilitar a manipula<;ao do elemento 
possibilitando o desenvolvedor a modificar as caracteristicas dos objetos de 
forma nao intrusiva e de maneira que seja transparente para o usuario final. 
Ao contrario das versoes anteriores, o HTML5 fornece ferramentas para a CSS 
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e o Javascript fazerem seu trabalho da melhor maneira possivel. O HTML5 
permite por meio de suas APIs a manipula^ao das caracteristicas destes 
elementos, de forma que o website ou a aplica^ao continue leve e funcional, 
sem a necessidade de cr^oes de grandes blocos de scripts. 

O HTML5 tambem cria novas tags e modifica a fun<;ao de outras. As versoes 
antigas do HTML nao continham um padrao universal para a cria<;ao de 
se^oes comuns e especificas como rodape, cabe$alho, sidebar, menus e etc. 
Nao havia um padrao de nomenclatura de IDs, Classes ou tags. Nao havia um 
metodo de capturar de maneira automatica as informa^oes localizadas nos 
rodapes dos websites. 

Ha outros elementos e atributos que sua fun^ao e significado foram 
modificados e que agora podem ser reutilizados de forma mais eficaz. Por 
exemplo, tags como Bel que foram descontinuados em versoes anteriores do 
HTML agora assumem fun<;oes diferentes e entregam mais significado para 
os usuarios. 

O HTML5 modifica a forma de como escrevemos codigo e organizamos 
a informa<;ao na pagina. Seria mais semantica com menos codigo. Seria 
mais interatividade sem a necessidade de instala^ao de plugins e perda de 
performance. E a cria^ao de codigo interoperavel, pronto para futuros 
dispositivos e que facilita a reutiliza^ao da informa^ao de diversas formas. 

O WHATWG tern mantido o foco para manter a retrocompatibilidade. 
Nenhum site precisara ser refeito totalmente para se adequar aos novos 
conceitos e regras. O HTML5 esta sendo criado para que seja compativel 
com os browsers recentes, possibilitando a utiliza<;ao das novas caracteristicas 
imediatamente. A regra primordial entre os desenvolvedores web Don’t Break 
The Web e seguida a risca. 

O desenvolvimento modular 

Antigamente, para que uma nova versao do HTML ou do CSS fosse lan<;ada, 
todas as ideias listadas na especifica<;ao deveriam ser testadas e desenvolvidas 
para entao serem publicadas para o suporte dos browsers e o uso dos 
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desenvolvedores. Era feito um lan^amento unico para a linguagem inteira. 

Esse metodo foi mudado com o lan^amento do HTML5 e o CSS3. A partir 
de agora, as duas tecnologias foram divididas em modulos. Isso quer dizer 
que a comunidade de desenvolvedores e os fabricantes de browsers nao 
precisam esperar que todo o padrao seja escrito e publicado para utilizarem 
as novidades das linguagens. 

As propriedades do CSS3, por exemplo, foram divididas em pequenos 
grupos. Ha um grupo cuidando da propriedade Background, outro da 
propriedade Border, outro das propriedades de Texto etc. Cada um destes 
grupos sao independentes e podem lan^ar suas novidades a qualquer 
momento. Logo, o desenvolvimento ficou mais dinamico, com novidades 
mais constantes. 

A desvantagem desta constancia e que problemas de compatibilidade 
podem ocorrer com mais frequencia. Por exemplo, um browser pode adotar 
bordas arredondadas e outro nao. Ou um browser pode escolher suportar 
um API diferente do API que o concorrente implementou. Sendo assim, os 
browsers tem mostrado grande interesse em se manterem atualizados em 
rela(jao aos seus concorrentes. A Guerra dos Browsers esta ainda presente 
no desenvolvimento web, e isso e bom. Nao e uma guerra predatoria, onde 
um browser tenta minar o mercado do outro, mas e uma guerra competitiva, 
saudavel para o mercado. 


Estrutura bAsica, DOCTYPE e charsets 


A estrutura basica do HTML5 continua sendo praticamente a mesma das 
versoes anteriores, mas com menos codigo. Segue abaixo como a estrutura 
basica pode ser seguida: 


<!DOCTYPE html> 
<htm1 1ang=”pt-br”> 
<head> 
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<meta charset=”UTF-8”> 

<tit1e></tit1e> 

</head> 

<body> 

Corpo do site. 

</body> 

</html> 

O Doctype 

O Doctype deve ser sempre a primeira linha de codigo do documento antes da 
tag HTML. 

<!DOCTYPE htm1> 

O Doctype indica para o navegador e para outros meios qual a especifica^ao 
de codigo utilizar. Isso determina a forma com que o meio de acesso ira 
renderizar o codigo lido. Em versoes anteriores, era necessario referenciar o 
DTD diretamente no codigo do Doctype. Com o HTML5, a referenda por 
qual DTD utilizar e responsabilidade do Browser. 

O Doctype nao e uma tag do HTML, mas uma instru<;ao para que o browser 
tenha informa^oes sobre qual versao de codigo a marca^ao foi escrita. 


O elemento HTML 

O codigo HTML e uma serie de elementos em arvore onde alguns elementos 
sao filhos de outros e assim por diante (DOM, lembra?). O elemento principal 
dessa grande arvore e sempre a tag HTML. 

<htm1 1ang=”pt-br”> 

O atributo LANG e necessario para que os user-agents saibam qual a 
linguagem principal do documento. 

Lembre-se que o atributo LANG nao e um novo atributo. Ele ja existe desde 
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muito tempo e nao e restrito ao elemento HTML, sendo possivel ser utilizado 
em qualquer outro elemento para indicar o idioma do texto representado. O 
que e muito bom para leitores de tela. 

Para encontrar a listagem de codigos das linguagens, acesse: 
http://www.w3.org/International/questions/qa-choosing-language-tags. 

HEAD 

A Tag HEAD e onde fica toda a parte inteligente da pagina. No HEAD fleam 
os metadados. Metadados sao informa^oes sobre a pagina e o conteudo 
ali publicado. 

Metatag Charset 

No nosso exemplo ha uma metatag responsavel por chavear qual tabela de 
caracteres a pagina esta utilizando. Nas versoes anteriores ao HTML5, essa tag 
era escrita da forma abaixo: 

<meta http-equiv=”Content-Type” content=”text/htm1; 
charset=utf-8”> 

O novo codigo para o HTML5 resumiu bastante as coisas, retirando todo o 
codigo inutil para nos, deixando a linha acima assim: 

<meta charset=”utf-8”> 

A Web e acessada por pessoas do mundo inteiro. Ter um sistema ou um 
site que limite o acesso de pessoas de outros paises e algo que vai contra a 
tradi$ao e os ideais da internet. Por isso, foi criado uma tabela que suprisse 
as necessidades impostas pelas linguagens do mundo todo, essa tabela 
chama-se Unicode. 

A tabela Unicode suporta algo em torno de um milhao de caracteres. Ao 
inves de cada regiao ter sua tabela de caracteres, e muito mais sensato 
existir uma tabela padrao com o maior numero de caracteres possivel, 
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dando a possibilidade de guardarmos todos as letras e simbolos utilizados 
nos idiomas do mundo. O que o Unicode faz e fornecer um unico nume- 
ro para cada caractere, nao importa a plataforma, nem o programa, nem 
a lingua. 

Atualmente a maioria dos sistemas e browsers utilizados por usuarios 
suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode voce 
garante que ele sera bem visualizado aqui, na China ou em qualquer outro 
lugar do mundo. 

Tag LINK 

Ha dois tipos de links no HTML: a tag A, que e a abrevia^ao de ANCHOR, 
que sao elementos que levam o usuario para outros documentos o famoso 
Hiperlink. E ha a tag LINK, que e uma tag para importar objetos externos que 
serao usados no documento, como arquivos de CSS, RSS, etc. Por isso nao se 
confunda. 

No nosso exemplo ha uma tag LINK que importa o CSS para nossa pagina: 

<1ink re1=”sty1esheet” type=”text/css” href=”estilo. 
css”> 

O atributo rel=”stylesheet” indica que aquele link e relativo a importa<;ao de 
um arquivo referente a folhas de estilo. 

Ha outros valores para o atributo REL, como por exemplo o ALTERNATE: 

clink re1=”a1ternate” type=”app1ication/atom+xm1” 
tit1e=”feed” href=”/feed/”> 

Neste caso, indicamos aos user-agents que o conteudo do site poder ser 
encontrado em um caminho alternative via Atom FEED. 

No HTML5 ha outros links relativos que voce pode inserir como o 
reU"archives” que indica uma referenda a uma cole^ao de material historico 
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da pagina. Por exemplo, a pagina de historico de um blog pode ser referenciada 
nesta tag. 

MODELOS DE CONTEUDO 


Ha pequenas regras basicas que nos ja conhecemos e que estao no HTML 
desde o inlcio. Estas regras definem onde os elementos podem ou nao 
estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus 
comportamentos. Essas regras sao chamadas de Modelos de Conteudo. 

Dentre todas as categorias de modelos de conteudo, existem dois tipos de 
elementos: elementos de linha e os elementos de bloco. Os elementos de linha 
marcam, na maioria das vezes, textos, elementos de formularios, imagens. 
Alguns exemplos: a, strong, em, img, input, abbr, span. Ja os elementos de 
blocos sao como caixas, que dividem o conteudo em se^oes do layout. 

Abaixo segue algumas premissas que voce precisa relembrar e conhecer: 

• Os elementos de linha podem conter outros elementos de linha, 
dependendo da categoria que ele se encontra. Por exemplo: o elemento A 
nao pode conter o elemento LABEL. Mas o inverso e possivel. 

• Os elementos de linha nunca podem conter elementos de bloco. 

• Elementos de bloco sempre podem conter elementos de linha. 

• Elementos de bloco podem conter elementos de bloco, dependendo 
da categoria que ele se encontra. Por exemplo, um paragrafo nao pode 
conter um DIV. Mas o inverso e possivel. 

Estes dois grandes grupos podem ser divididos em categorias. Estas categorias 
dizem qual modelo de conteudo o elemento se encaixa e como pode ser 
seu comportamento. 

Os navegadores utilizam muito estas regras para definir o fluxo de informa<;ao 
e quais as suas utiliza<;6es. Alguns browsers podem ajudar o desenvolvedor 
tentando consertar algum erro de sintaxe. Outros simplesmente quebram o 
layout ou a aplica^ao no local que o erro de sintaxe acontece. Tome cuidado 
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com essas diferen^as de comportamento. E interessante entender exatamente 
como cada browser se comporta nestas situates. 

Categorias 

Cada elemento no HTML pode ou nao fazer parte de um grupo de elementos 
com caracteristicas similares. As categorias estao a seguir. Manteremos os 
nomes das categorias em ingles para que haja um melhor entendimento: 

• Metadata content 

• Flow content 

• Sectioning content 

• Heading content 

• Phrasing content 

• Embedded content 

• Interactive content 


Metadata content 

Os elementos que compoe a categoria Metadata sao: 


base 

command 

link 

meta 

noscript 

script 

style 

tide 




Este conteudo vem antes da apresenta^ao, formando uma rela^ao com 
o documento e seu conteudo com outros documentos que distribuem 
informa^ao por outros meios. 


Flow content 

A maioria dos elementos utilizados no body e aplica^oes sao categorizados 
como Flow Content. Sao eles: 


abbr | address 
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area 


article 
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aside 

audio 

b 

bdo 

blockquote 

br 

button 

canvas 

cite 

code 

command 

datalist 

del 

details 

dfn 

div 

dl 

em 

embed 

fieldset 

figure 

footer 

form 

hi ate h6 

header 

hgroup 

hr 

i 

iframe 

img 

input 

ins 

kbd 

keygen 

label 

link 

map 

mark 

math 

menu 

meta 

meter 

nav 

noscript 

object 

ol 

output 

p 

pre 

progress 

q 

ruby 

samp 

script 

section 

select 

small 

span 

strong 

style 

sub 

sup 

svg 

table 

textarea 

time 

ul 

var 

video 

wbr 

text 






Por via de regra, elementos que seu modelo de conteudo permitem inserir 
qualquer elemento que se encaixa no Flow Content, devem ter pelo menos 
um descendente de texto ou um elemento descendente que fa$a parte da 
categoria embedded. 


Sectioning content 

Estes elementos definem se^oes principals no codigo. Como por exemplo 
rodapes, cabe^alhos, area do texto principal, listas de navega^oes etc. 

| header | footer | article | aside | nav | section | 

Aqui e onde o HTML5 inseriu mais tags novas. Estas novas tags vieram para 
melhorar a semantica dos elementos estruturais do codigo. Antes era quase 
impossivel identificar de maneira automatica o que era um rodape ou um 
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header de pagina. Era dificilimo localizar o bloco com o texto principal de 
uma pagina. Com estas tags esse trabalho ficou mais simples. 

Heading content 

Os elementos da categoria Heading definem uma se^ao de cabec^alhos, que 
podem estar contidos em um elemento na categoria Sectioning. 

hi ate h6 | hgroup | header | 


Phrasing content 

Fazem parte desta categoria elementos que marcam o texto do documento, 
bem como os elementos que marcam este texto dentro do elemento de 
paragrafo. 


a 

abbr 

area 

audio 

b 

bdo 

br 

button 

canvas 

vite 

code 

command 

datalist 

del 

dfn 

em 

embed 

i 

iframe 

img 

input 

ins 

kbd 

keygen 

label 

link 

map 

mark 

math 

meta 

meter 

noscript 

object 

output 

progress 

q 

ruby 

samp 

script 

sup 

select 

small 

span 

strong 

sub 

svn 

textarea 

time 

var 

video 

textarea 

time 

var 

video 

wbr 

Text 






Embedded content 

Na categoria Embedded, ha elementos que importam outra fonte de 
informa^ao para o documento. 
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audio 

canvas 


iframe 

nng 

math 

objevt 

svg 

video 



Interactive content 

Interactive Content sao elementos que fazem parte da intera^ao de usuario. 


a 

audio 

button 

details 

embed 

iframe 

img 

input 

keygen 

label 

menu 

object 

select 

textarea 

video 


Alguns elementos no HTML podem ser ativados por um comportamento. Isso 
significa que o usuario pode ativa-lo de alguma forma. O inicio da sequencia 
de eventos depende do mecanismo de ativa^ao e normalmente culminam em 
um evento de click seguido pelo evento DOMActivate. 

O user-agent permite que o usuario ative manualmente o elemento que tem 
este comportamento utilizando um teclado, mouse, comando de voz etc. 


NOVOS ELEMENTOS E ATRIBUTOS 

O codigo HTML indica que tipo de informa^ao a pagina esta exibindo. 
Quando lemos um livro, conseguimos entender e diferenciar um titulo de 
um paragrafo. Basta percebermos a quantidade de letras, tamanho da fonte, 
cor etc. No codigo isso e diferente. Robos de busca e outros user-agents 
nao conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor 
marcar a informa^ao para que elas possam ser diferenciadas e rederizadas 
por diversos dispositivos. 

Com as versoes anteriores do HTML nos conseguimos marcar diversos 
elementos do layout, estruturando a pagina de forma que as informa<;6es 
ficassem em suas areas especlficas. Conseguiamos diferenciar por exemplo, 
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um paragrafo de um titulo. Mas nao conseguiamos diferenciar o rodape 
do cabe^alho. Essa diferencia^ao era apenas percebida visualmente com o 
layout pronto. Tambem nao havia maneira de detectar automaticamente estes 
elementos ja que as tags utilizada para ambos poderiam ser iguais e nao havia 
padrao para nomenclatura de IDs e Classes. 

O HTML5 criou uma serie de elementos que nos ajudam a definir os setores 
principals no documento. Com a ajuda destes elementos, podemos por 
exemplo diferenciar diretamente pelo codigo HTML5 areas importantes 
do site como sidebar, rodape e cabe^alho. Conseguimos seccionar a area de 
conteudo indicando onde exatamente esta o texto do artigo. 

Estas mudan^as simplificam o trabalho de sistemas como os dos buscadores. 
Com o HTML5 os buscadores conseguem vasculhar o codigo de maneira 
mais eficaz. Procurando e guardando informa^oes mais exatas e levando 
menos tempo para estocar essa informa^ao. 


Elementos de seqao 

Voce deve conhecer o elemento DIV. O DIV tern a fun^ao de criar divisoes. 
Quando criamos um website, dividimos as areas do layout em se^oes. O 
problema do DIV, e que ele nao tern nenhum significado semantico. Os 
sistemas de busca, por exemplo, nao tem como saber o que e um rodape, 
um cabe^alho, sidebar e etc, porque tudo e feito com DIVs e assim damos o 
mesmo nivel hierarquico de informa^ao para todas as se^oes. 

Para resolver esse problema, foi criado um conjunto novo de elementos que 
alem de dividir as areas do layout, ele entrega significado. Esses elementos sao 
chamados de Conteudos de Se^oes ou Sectioning content. 

Esse conjunto de tags tem a fun(;ao de dividir as areas do layout como faziamos 
com os DIVs, mas cada uma delas carrega um significado especifico. Entenda 
agora com mais detalhes o que cada um destes elementos significa. 
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O elemento SECTION 

A tag section define uma nova se$ao generica no documento. Por exemplo, 
a home de um website pode ser dividida em diversas secedes: introdu^ao, 
destaque, novidades, informa^ao de contato e chamadas para conteudo 
interno. 

Basicamente o elemento section substitui o div em muitos momentos. A 
imagem seguinte foi retirada do site Globo.com. 


<section> <section> <section> 



Ap6s ter reagao alergica, vietnamita Tevez nao treina com o grupo na volta Culpada em Vida', Manu diz que teve 

de 26 anos fica com aparencia de 70 ao City ap6s duas semanas suspenso que escolher entre salvar Ana ou Julia 



ss 


m S 11 SfL. ^ 3SSS3: 

Cada uma das colunas dos assuntos Notlcias, Esportes e Entretenimento 
como era de costume. 

Isso permite os sistemas de buscas ou outras aplica^oes saibam que cada 
um daqueles blocos trata-se de um assunto diferente. Meu desejo e que 
futuramente seja posslvel indicar qual tipo de assunto e abordado em cada 
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um destes elementos. 

Entenda que o section apenas divide estes assuntos. Nao e como o header, 
footer, aside, nav e article que dividem informa<;6es especificas, como 
veremos a seguir. O section e um elemento mais especifico que o div, mas nao 
mais especifico que estes elementos. Entenda que todos os outros objetos que 
veremos tambem sao chamados de sections, mas cada um deles e responsavel 
por uma parte da pagina: o header pelos cabe$alhos, o nav pelas listas de 
navega$oes e assim por diante. O section muitas vezes envolvera todos estes 
elementos, separando-os como um assunto. 

O elemento NAV 

O elemento nav representa uma se^ao da pagina que contem links para outras 
partes do website. Nem todos os grupos de links devem ser elementos nav, 
apenas aqueles grupos que contem links importantes. Aqueles links que sao 
considerados principals, por exemplo o menu principal do site. No caso dos 
portais, aquele menu lateral com uma serie de links separados por assuntos 
poderiam ser uma nav. Isso tambem pode ser aplicado para aqueles blocos de 
links que geralmente sao colocados no rodape. 

Imagine uma sidebar com uma serie de links, como por exemplo a sidebar de 
um portal de conteudo como o Gl, R7, UOL e etc... Nestes portais e normal 
voce encontrar diversos links para as categorias de assuntos. Anteriormente, 
se quisessemos agrupar por exemplo um Titulo e uma lista de links fariamos 
assim: 

<div c1ass=”categ categ-esporte”> 

<h3>Esporte</h3> 

<ul > 

<lixa href=”#”>Copa 2014</ax/1i> 

<lixa href=”#”>Brasi1ei rao</a></1i> 

<lixa href=”#”>Formu1a l</ax/li> 

<1 i xa href=”#”>Baskete</ax/l i > 

</ul> 

</div> 
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Este codigo resolvia nosso problema de formata^ao. Poderiamos utilizar o div 
que envolve o titulo e a lista para fazer algum detalhe visual e principalmente 
para agruparmos o conteudo relacionado que existia. Mas a nivel de 
informa^ao nao havia nenhuma indica<;ao de que o titulo estivesse ligado ao 
conteudo. Nao ha nenhuma referenda de que o titulo ESPORTE apresenta 
a lista de links abaixo dele. Visualmente essa rela(;ao e muito forte porque o 
designer desenhou o layout para que isso acontecesse, mas a nivel de codigo 
nos nao tinhamos como indicar essa relacjao de informa<;6es. Poderiamos 
fazer apenas para que o codigo ficasse organizado, mas para os leitores de 
tela ou sistemas de busca essa rela^ao simplesmente nao existia. Os sistemas 
de busca nao podem se basear apenas na posiqao dos elementos, e algo muito 
generico para eles confirmarem que a lista e o titulo que a precede estao 
ligados em um mesmo assunto. 

Com o HTML5, isso muda. Veja o codigo abaixo: 

<nav> 

<h3>Esporte</h3> 

<ul > 

<lixa href=”#”>copa 2014</ax/1i> 

<lixa href=”#”>Brasi1ei rao</ax/1i> 

<lixa href=”#”>Formu1a l</ax/1i> 

<1 i xa href=”#”>Baskete</ax/l i > 

</ul> 

</nav> 

Com a tag nav, ha uma indica^ao de que aquele grupo e uma sec^ao (nav e um 
tipo de section. Enquanto a tag section serve para indicar se^oes no site, a tag 
nav indica que um determinado grupo e uma seqao de navega<;ao) e um bloco 
de navega^ao. 

Dentro da nav voce pode agrupar uma serie de listas de links: 

<nav> 

<h3>Esportes</h3> 

<ul > 

<lixa href=”#”>copa 2014</ax/1i> 

<lixa href=”#”>Brasi1ei rao</ax/1i> 
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<lixa href=”#”>Formu1a l</ax/li> 

<1 i ><a href=”#”>Baskete</ax/l i > 

</ul> 

<h3>Educagao</h3> 

<ul > 

<1 i xa href=”#”>Educagao</ax/1 i > 

<1 i xa href=”#”>Di ci onari os</ax/1 i > 

<1 i xa href=”#”>Vesti bul ar</ax/l i > 

</ul> 

<h3>Noticias</h3> 

<ul > 

<1 i xa href=”#”>Coti di ano</ax/1 i > 

<lixa href=”#”>Po1 iti ca</ax/l i> 

<lixa href=”#”>3ornais</ax/li> 

</ul> 

</nav> 

A tag nav tambem pode estar em todos os elementos do HTML. Voce pode 
coloca-la no header para definir menus, no footer para definir grupos de 
links, sidebars, articles e etc. 

Com um bloco de navega<;ao definido, a acessibilidade da pagina pode ser 
explorada. Os leitores de tela, sistemas de busca ou qualquer outro sistema 
interessado, podem localizar facilmente os links importantes e internos da 
pagina por meio da tag nav. 

Entenda que o nav nao carrega qualquer tipo de links. Tenha em mente 
em sempre que usar o nav, ele ira carregar grupos de links ligados ao site. 
Normalmente estes links sao links internos, e por conta disso, o ranqueamento 
e a indexa^ao feita pelos buscadores pode ser melhorada. 


O elemento Article 
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A especifica^ao diz: 

“The article element represents a component of a page that consists of a self- 
contained composition in a document, page, application, or site and that is 
intended to be independently distributable or reusable, e.g. in syndication. This could 
be a forum post, a magazine or newspaper article, a blog entry, a user-submitted 
comment, an interactive widget or gadget, or any other independent item of content.” 

O elemento article e onde colocamos o texto ou a informa^ao principal. 
Imagine que voce esta visitando um blog, ha uma sidebar e ha tambem o 
bloco de texto, que seria o bloco que carrega o conteudo principal do site. 
Este bloco seria marcado como article. Dentro deste article havera toda a 
informa<;ao necessaria sobre o artigo: data de publica^ao, tltulo, autor, o texto, 
informa^oes de outros artigos relacionados etc. 

Para entender melhor, a informa(;ao que vai dentro do article e exatamente a 
mesma informa^ao que os leitores de feeds capturam do seu RSS/Atom. O 
leitor de FEED nao disponibiliza o menu do site, a sidebar e etc, ele apenas 
disponibiliza o texto principal do post, e sera esse texto que havera no 
elemento article. 

Um exemplo de codigo: 

<article> 

<header> 

<hl>Tttulo do post</hl> 

<time datetime=”12-03-1983” pubdate=’’pubdate”>03 de 
Dezembro de 1983</time> 

<p>Texto de introducao.</p> 

</header> 

<h2>um outro titulo</h2> 

<p>Texto do post.</p> 

<p>Texto do post.</p> 

<p>Texto do post.</p> 


Alguns podem confundir os elementos de article, section e div. Entenda que 
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o article e um elemento mais especifico que o section e o div. O article marca 
o texto principal do site. E o file da pagina. O section e apenas um bloco de 
separa^ao de assuntos diferentes. O div, o mais generico de todos, e apenas 
aplicado para separar elementos em blocos, por isso ele nao carrega nenhum 
significado semantico. 

Sendo mais especifico: Para marcar informa<;6es e conteudos que fazem 
sentido se forem vistos de fora do site, como em leitores de RSS, utilize o 
article. Ou seja, o que voce mostra no Feed? Menu, rodape, header, sidebar 
ou somente o bloco de texto do artigo? Pois e isto que voce marcara com a 
tag article. 

Para separar e organizar conteudos de diversos assuntos em blocos diferentes, 
utilize o section. 

Para utiliza^ao nao semantica, para formata<;ao com CSS e detalhes genericos, 
utilize o div. 


O elemento ASIDE 

O elemento aside representa um bloco de informa<;ao relativa ao conteudo principal. 

Algumas utilidades do aside: cita^oes ou sidebars, agrupamento de 
publicidade, grupos e blocos de navega^ao ou para qualquer outro conteudo 
que tenha importancia secundaria e relativa ao conteudo principal da pagina. 

Dentro do aside voce pode agregar por exemplo grupos de elementos nav, 
headers, sections e etc, permitindo produzir um menu lateral com os grupos 
de informa^oes: 

<aside id=”menulateral”> 

<nav> 

<h3>Esportes</h3> 

<ul > 

<lixa href=”#”>Formu1a l</ax/li> 

<1 i><a href=”#”>Futebo1 </ax/l i > 
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<1i><a href=”#”>Baskete</ax/1i> 

<1 i ><a h ref=”#”>vo1 ey</ax/1 i > 

</ul> 

</nav> 

<nav> 

<h3>Po1 i tica</h3> 

<ul > 

<lixa href=”#”>Eleiq:6es 2010</ax/1i> 
<lixa href=”#”>Urna e1etronica</ax/1i> 

<1 i xa href=”#”>candi datos</ax/1 i > 

</ul> 

</nav> 

</aside> 

Note que nao utilizamos nenhum div, pelo contrario, utilizamos apenas 
tags que trazem significado semantico. Neste exemplo, indicamos - para o 
navegador ou aplica^ao, sistema de busca ou qualquer outra coisa que acessara 
nosso codigo - que aquele e bloco lateral, e que cada grupo de nav e referente 
a um assunto. 

O elemento aside tambem pode estar dentro de um elemento article, como 
uma caixa de nota^ao ou algo do genero. Nesse caso, quando o usuario 
imprimir, voce pode dar enfase como se fosse uma caixa de informa^ao. 
Como e feito em livros ou revistas. 

Atributos 

Alguns elementos ganharam novos atributos: 


• O atributo autofocus pode ser especificado nos elementos input (exceto 
quando ha atributo hidden atribuldo), textarea, select e button. 

• A tag a passa a suportar o atributo media como a tag link. 

• A tag form ganha um atributo chamado novalidate. Quando aplicado o 
formulario pode ser enviado sem valida<;ao de dados. 

• O elemento ol ganhou um atributo chamado reversed. Quando ele e 
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aplicado os indicadores da lista sao colocados na ordem inversa, isto e, 
da forma descendente. 

• O elemento fieldset agora permite o atributo disabled. Quando aplicado, 
todos os filhos de fieldset sao desativados. 

• O novo atributo placeholder pode ser colocado em inputs e textareas. 

• O elemento area agora suporta os atributos href, lang e rel como os 
elementos a e link 

• O elemento base agora suporta o atributo target assim como o elemento 
a. O atributo target tambem nao esta mais descontinuado nos elementos 
a e area porque sao uteis para aplicac^oes web. 

Os atributos abaixo foram descontinuados: 

• O atributo border utilizado na tag img. 

• O atributo language na tag script. 

• O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez 
de name. 

• O atributo summary na tag table. 

Este atributos foram descontinuados porque modificam a formata<;ao do 

elemento e suas fun^oes sao melhores controladas pelo CSS: 

• align como atributo da tag caption, iframe, img, input, object, legend, 
table, hr, div, hi, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, 
thead e tr. 

• alink, link, text e vlink como atributos da tag body. 

• background como atributo da tag body. 

• bgcolor como atributo da tag table, tr, td, th e body. 

• border como atributo da tag table e object. 

• cellpadding e cellspacing como atributos da tag table. 

• char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, 
thead e tr. 

• clear como atributo da tag br. 

• compact como atributo da tag dl, menu, ol e ul. 
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• frame como atributo da tag table. 

• frameborder como atributo da tag iframe. 

• height como atributo da tag td e th. 

• hspace e vspace como atributos da tag img e object. 

• marginheight e marginwidth como atributos da tag iframe. 

• noshade como atributo da tag hr. 

• nowrap como atributo da tag td e th. 

• rules como atributo da tag table. 

• scrolling como atributo da tag iframe. 

• size como atributo da tag hr. 

• type como atributo da tag li, ol e ul. 

• valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr. 

• width como atributo da tag hr, table, td, th, col, colgroup e pre. 

Alguns atributos do HTML4 nao sao mais permitidos no HTML5. Se eles 
tiverem algum impacto negativo na compatibilidade de algum user-agent eles 
serao discutidos. 

• rev e charset como atributos da tag link e a. 

• shape e coords como atributos da tag a. 

• longdesc como atributo da tag img and iframe. 

• target como atributo da tag link. 

• nohref como atributo da tag area. 

• profile como atributo da tag head. 

• version como atributo da tag html. 

• name como atributo da tag img (use id instead). 

• scheme como atributo da tag meta. 

• archive, classid, codebase, codetype, declare e standby como atributos da 
tag object. 

• valuetype e type como atributos da tag param. 

• axis e abbr como atributos da tag td e th. 

• scope como atributo da tag td. 

O W3C mantem um documento atualizado neste link: http://bit.ly/r5S9SX. 
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ELEMENTOS MODIFICADOS 
OU AUSENTES 


Existiam no HTML alguns elementos que traziam apenas caracteristicas visuais 
e nao semanticas para o conteudo da pagina. Esses elementos anteriormente 
foram descontinuados porque atrapalhavam o codigo e tambem porque sua 
fun^ao era facilmente suprida pelo CSS. Contudo, alguns destes elementos 
voltaram a tona com novos significados semanticos. Outros elementos que 
nao descontinuados, mas seus significados foram modificados. 

Elementos modificados 

• O elemento B passa a ter o mesmo nivel semantico que um SPAN, mas 
ainda mantem o estilo de negrito no texto. Contudo, ele nao da nenhuma 
importancia para o text marcado com ele. 

• O elemento I tambem passa a ser um SPAN. O texto continua sendo 
italico e para usuarios de leitores de tela, a voz utilizada e modificada para 
indicar enfase. Isso pode ser util para marcar frases em outros idiomas, 
termos tecnicos e etc. 

O interessante e que nestes dois casos houve apenas uma mudan^a semantica. 
Provavelmente voce nao precisara modificar codigos onde estes dois 
elementos sao utilizados. 

• O elemento a sem o atributo href agora representa um placeholder no 
exato lugar que este link se encontra. 

• O elemento address agora e tratado como uma se^ao no documento. 

• O elemento hr agora tern o mesmo nivel que um paragrafo, mas e 
utilizado para quebrar linhas e fazer separates. 

• O elemento strong ganhou mais importancia. 

• O elemento head nao aceita mais elementos child como seu filho. 
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Elementos ou atributos descontinuados 

Os elementos abaixo foram descontinuados por que seus efeitos sao apenas 
visuais: 


basefont 

big 

center 

font 

s 

strike 

tt 

u 




Os elementos abaixo foram descontinuados por que ferem os prindpios de 
acessibilide e usabilidade: 


frame frameset noframes 


Os elementos abaixo nao foram incluldos na especifica<;ao porque nao 
tiveram uso entre os desenvolvedores ou porque sua funcjao foi substitulda 
por outro elemento: 

acronym 

Nao foi incluldo porque criou um bocado de confusao entre os desenvolvedores 
que preferiram utilizar a tag abbr. Acronimos sao abrevia^oes, mas sao um 
pouco diferentes. Acronimos sao abreviacjoes que formam siglas, por exemplo 
N.A.S.A. 

applet 

Ficou obsoleto em favor da tag object. 
isindex 

Foi substituldo pelo uso de form controls. 
dir 

Ficou obsoleto em favor da tag ul. 
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COMPATIBILIDADE DO HTML5 

Atualmente o Webkit e o motor mais compativel com os Padroes do HTML5. 
Como a Apple tem interesse que seus dispositivos sejam ultracompatlveis 
com os Padroes, ela tem feito um belo trabalho de atualiza^ao e avan<;o da 
compatibilidade deste motor. 

O Firefox e o Opera ja estao compatlveis com grande parte da especifica^ao 
do HTML5 e CSS3 e a cada upgrade eles trazem mais novidades e atualiza<;ao 
dos padroes. 

O que pode te preocupar de verdade e a retrocompatibilidade com versoes 
antigas de browsers como o Internet Explorer. A Microsoft esta fazendo um 
bom trabalho com o IE9, mas as versoes 8 e 7 nao tem quase nenhum suporte 
ao HTML5, o que e um problema serio para aplica^oes web baseadas em 
tecnologias mais recentes. A boa notlcia e que a partir de Janeiro de 2012 a 
Microsoft ativara o autoupdate dos sistemas WindowsXP e Windows Vista, 
fazendo com que o IE6 seja atualizado automaticamente. Desenvolver para 
IE8 e 9 e muito melhor do que desenvolver para IE6 e 7. Aleluia! 

Abaixo segue uma tabela simples de compatibilidade entre os browsers e 
alguns modulos do HTML5 ate a escrita deste livro: 


Modulos 

Safari 

Chrome 

Opera 

Firefox 

IE8 

IE9 

Local Storage 

sim 

sim 

sim 

sim 

sim 

sim 

Historico de Sessao 

sim 

sim 

sim 

sim 

sim 

sim 

Aplica^oes Offline 

sim 

sim 

nao 

sim 

nao 

nao 

Novos tipos de 







campos 

sim 

sim 

sim 

nao 

nao 

nao 

Form: Autofocus 

sim 

sim 

sim 

nao 

nao 

nao 

Form: 



sim 




Autocomplete 

nao 

nao 

nao 

nao 

nao 
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Form: Required 

sim 

sim 

sim 

nao 

nao 

nao 

Video, Audio e 







Canvas Text 

sim 

sim 

sim 

sim 

nao 

sim 


Tecnicas de detecqao 

Pode ser que o usuario nao utilize um browser que suporta HTML5. Neste 
caso, voce pode redireciona-lo para uma versao do site mais simples, ou talvez 
apenas mostrar uma mensagem alertando o usuario sobre a importancia da 
atualiza^ao do browser. Para isso temos algumas tecnicas de detecqao para 
conferir se o browser suporta ou nao HTML5. 

Quando o browser visita um website, ele constroi uma cole^ao de objetos 
que representam elementos HTML na pagina. Cada elemento no codigo e 
representado no DOM como um objeto diferente. Todo objeto DOM tem 
propriedades em comum, mas alguns objetos tem caracteristicas especificas. 
Usaremos estes objetos para fazermos a detecqao. Abaixo segue 4 meios que 
voce podera utilizar para detectar o suporte do browser: 

• Verifique se uma determinada propriedade existe em objetos globais 
como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a 
geolocaliza^ao. 

• Crie um elemento e verifique se uma determinada propriedade existe 
neste elemento. 

• Crie um elemento e verifique se um determinado metodo existe neste 
elemento, entao chame o metodo e verifique se o valor retorna. Por 
exemplo, teste quais formatos de video sao suportados. 

• Crie um elemento e defina um atributo com um determinado valor, 
entao verifique se o atributo suporta este valor. Por exemplo, crie um 
input e verifique quais types sao suportados. 


IP 












HTML5 e CSS3 com Farinha e Pimenta 


Utilizando a Biblioteca Modernizr 

Alguns browsers nao aceitam as novas features de CSS3 e HTML5. Saiba 
como detecta-los e trata-los com a biblioteca Modernizr. 


Problemas de compatibilidade 

Quando produzimos um site os problemas de compatibilidade fazem parte 
da regra do jogo. Para tentar contornar estes problemas utilizamos hacks, 
comentarios condicionais, sniffing de browsers e outras coisas, que muitas 
vezes mais prejudicam do que ajudam. 

Para ajudar mais ainda o CSS3 e o HTML5 apareceram derrubando tudo, e 
o problema de compatibilidade que ja era chato, ficou mais chato que meia 
molhada. Embora os browsers estejam muito mais atuais e suportando 
propriedades avan^adas de CSS3 e HTML5, nao e garantia que todos eles 
suportem as mesmas propriedades. E e aqui que come^amos a ter problemas 
novamente, como no passado. 

Como voce consegue reconhecer quern um determinado browser suporta 
CSS Animation? Como voce sabe que o browser conhece LocalStorage do 
HTML5? Voce nao vai ficar olhando numa tabelinha toda vez que tiver essas 
duvidas para fazer um visual ou uma solu<;ao alternativa para tais browsers. 

E por essas e outras que voce utilizara a Modernizr. 


O que e a Modernizr 

Modernizr e uma pequena biblioteca Javascript que detecta a disponibilidade 
das novas caracteristicas do HTML5 e CSS3 nos browsers. Muitas destas 
caracteristicas ja estao implementadas nos browsers, mas e muito chato voce 
decorar quais novidades os browsers ja estao suportando. O que a Modernizr 
faz e simples: ela te diz quais features um determinado browser suporta e 
insere classes no HTML para que voce possa utilizar para fazer uma versao 
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alternativa de visual ou solu^ao. 

Entenda que a Modernizr nao e um sniffing de browser. Ela e diferente. A 
Modernizr faz o trabalho de detectar das seguintes formas: 

• Ela testa 40 features de CSS3 e HTML5 em alguns milisegundos. 

• Depois ela cria objetos javascript que contem os resultados destes testes. 

• Ai sao adicionadas classes no elemento HTML descrevendo exatamente 
quais propriedades e novidades sao ou nao nativamente suportadas. 

• Depois disso voce consegue ter os resultados descritos nos navegadores 
dinamicamente e entao pode tomar decisoes criando alternativas para 
aquelas propriedades nao suportadas pelos browsers antigos. 

Como funciona 

E simples: primeiro voce baixa a versao mais atual da biblioteca no endere^o 
http://www.modernizr.com/. O interessante e que voce tem a op^ao para 
personalizar a biblioteca, indicando quais features voce quer que a Modernizr 
teste no seu projeto. 

Depois voce inclui esse pacote no seu HTML: 

<!DOCTYPE htm1> 

<htm1 1ang=”pt-br”> 

<head> 

<meta charset=”utf-8”> 

<tit1e>Teste de Modernizr</tit1e> 

<script src=”modermzr-2.0.6.js”x/script> 
</head> 

<body> 

</body> 

</html> 

Feito isso, insira uma classe no-js no elemento HTML: 

<htm1 class=”no-js” lang=”pt-br”> 
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Quando a Modernizr rodar, ela ira substituir essa classe para uma js se o 
browser estiver com o Javascript ligado, ja te dando um feedback para tomar 
alguma atitude se o usuario estiver com o Javascript desligado. 

Junto com essa mudan<;a sao adicionadas outras classes, indicando o que 
o browser aceita nativamente ou o que ele nao aceita. Ficara algo parecido 
com isso: 


<htmJ class=” js flexbox canvas canvastext webgl 
no-touch geolocation postmessage websqldatabase no- 
indexeddb hashchange history draganddrop websockets rgba 
hsla multiplebgs backgroundsize borderimage borderradius 
boxshadow textshadow opacity cssanimations csscolumns 
cssgradients cssreflections csstransforms csstransforms3d 
csstransitions fontface generatedcontent video audio 
local storage sessionstorage webworkers applicationcache 
svg inlinesvg smil svgclippaths” lang=”pt-br”> 

O browser que eu utilizei e o Safari/Mac. Pelo visto ele aceita bastante coisa.;-) 
O que o browser nao aceita, a Modernizr insere uma classe com o prefixo no- 
antes da classe, por exemplo: no-boxshadow, no-geolocation, no-touch etc. 

A Modernizr tambem cria um objeto Javascript contendo um valor booleano 
para cada uma dessas features, possibilitando a cria<;ao de testes. Um exemplo: 

if (Modernizr.geolocation) { 
alert(“Aceita”) 

} else { 

alert(“Nao Aceita”) 

} 

Exemplos de utilidade 

Exemplo bem basico: imagine que voce queira utilizar o box-shadow em seu 
projeto. Browsers como o IE6,7,8 nao reconhecem essa feature, entao seria 
interessante darmos uma alternativa, como por exemplo, colocando uma borda 
em vez de sombra. Assim o elemento nao fica tao diferente do que deveria. 

Como a Modernizr colocou uma classe no elemento HTML referente a 
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aceitacjao das features, podemos utiliza-la fazendo assim: 

.loginBox { 

box-shadow:0 lOpx lOpx rgbaCO, 0, 0, 0.3); 

} 

.no-boxshadow .loginBox { 
border: lpx solid #CCC; 
border-bottom: 3px solid #CCC; 

} 

Assim, se o browser nao aceitar a propriedade box-shadow o usuario vera 
uma borda no lugar. Voce pode fazer isso com praticamente qualquer nova 
feature do CSS3 e do HTML5. 

Ah, mais uma coisa: provavelmente voce ja utiliza um scriptzinho html5.js 
para fazer com o que os Internet Explorers reconhe^am as tags do HTML5, 
correto? O Modernizr ja faz isso automaticamente. Sugiro que pare de utilizar 
o html5.js e passe a utilizar a Modernizr somente. 

A Modernizr facilita demais as coisas. A ideia e que voce nao prive seus 
projetos da utiliza^ao de features novas. A produ<;ao vai ficar mais eficaz e seu 
projeto sempre estara atualizado com as melhores praticas do mercado. Adote 
a Modernizr e seja feliz. 
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formulArios e 

MULTIMIDIA 


NOVOS TIPOS DE CAMPOS 


Quando o grupo WHATWG resolveu reescrever o HTML, eles decidiram 
come^ar pelos formularios. Se voce perceber, estamos escrevendo 
formularios da mesma maneira desde o inlcio de tudo. Nunca houve uma 
atualiza<;ao sensata e interessante que modificasse a forma com que usavamos 
e submetiamos informa^oes via formularios. 

Foi ai que o grupo decidiu criar alguns novos tipos de formularios, facilitando 
a usabilidade do usuario e facilitando a vida do desenvolvedor ao produzir 
campos de formularios. 

O elemento input aceita os seguintes novos valores para o atributo type: 


tel 


Telefone. Nao ha mascara de formata^ao ou valida^ao, propositalmente, visto 
nao haver no mundo um padrao bem definido para numeros de telefones. 
E claro que voce pode usar a nova API de valida$ao de formularios para 
isso. Os agentes de usuario podem permitir a integra<;ao com sua agenda de 
contatos, o que e particularmente util em telefones celulares. 

search 

Um campo de busca. A aparencia e comportamento do campo pode mudar 
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ligeiramente dependendo do agente de usuario, para parecer com os demais 
campos de busca do sistema. 

email 

E-mail, com formata^ao e valida^ao. O agente de usuario pode inclusive 
promover a integra$ao com sua agenda de contatos. 

url 

Um endere^o web, tambem com formata^ao e valida^ao. 


Datas e horas 

datetime-local 

O tipo de campo datetime-local trata automaticamente as diferen(;as de fusos 
horarios, submetendo ao servidor e recebendo dele valores GMT. Com isso 
voce pode, com facilidade, construir um sistema que sera usado em diferentes 
fusos horarios e permitir que cada usuario lide com os valores em seu proprio 
fuso horario. 

O campo de formulario pode conter qualquer um desses valores no 
atributo type: 

• datetime 

• date 

• month 

• week 

• time 

• datetime-local 

Todos devem ser validados e formatados pelo agente de usuario, que pode 
inclusive mostrar um calendario, um seletor de horario ou outro auxilio ao 
preenchimento que estiver disponivel no sistema do usuario. 
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O atributo adicional step define, para os validadores e auxflios ao preenchimento, 
a diferen^a minima entre dois horarios. O valor de step e em segundos, e o 
valor padrao e 60. Assim, se voce usar step=”300” o usuario podera fornecer 
como horarios 7:00, 7:05 e 7:10, mas nao 7:02 ou 7:08. 

number 

Veja um exemplo do tipo number com seus atributos opcionais: 

<!DOCTYPE htm1> 

<htm1 1ang=’’en-US”> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Number type</title> 

</head> 

<body> 

<input name=”valuex” type=”number” va1ue=”12.4” 
step=”0.2” min=”0” max=”20”> 


</body> 

</html> 


O Opera 10 nos da uma excelente visualiza^ao do que um agente de usuario 
pode fazer nesse caso: 



^40 O"* 8 Local localhost/ 
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range 

Vamos modificar, no exemplo acima, apenas o valor de type, mudando de 
“number” para “range”: 

<!DOCTYPE htm1> 

<htm1 1ang=’’en-US”> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Range type</tit1e> 

</head> 

<body> 

<input name=”va1uex” type=”range” 
va1ue=”12.4” step=”0.2” 
tm'n=”0” max=”20”> 

</body> 

</html> 

Novamente, Opera 10: 


0 Range 

f 4 O 



Local 


localhost/User: 


o 
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color 

O campo com type=”color” e um seletor de cor. O agente de usuario pode 
mostrar um controle de sele^ao de cor ou outro auxflio que estiver disponivel. 
O valor sera uma cor no formato #ff6600. 


TIPOS DE DADOS E VALIDADORES 

Formularios vitaminados 

Conforme voce deve ter percebido no ultimo capitulo, o HTML5 avanqou 
bastante nos recursos de formularios, facilitando muito a vida de quern 
precisa desenvolver aplica^oes web baseadas em formularios. Neste capitulo 
vamos avan<;ar um pouco mais nesse assunto e, voce vai ver, a coisa vai ficar 
ainda melhor. 


AUTOFOCUS 

Ao incluir em um campo de formulario o atributo autofocus, assim: 

<input name=”login” autofocus > 

O foco sera colocado neste campo automaticamente ao carregar a pagina. 
Diferente das solu^oes em Javascript, o foco estara no campo tao logo ele seja 
criado, e nao apenas ao final do carregamento da pagina. Isso evita o problema, 
muito comum quando voce muda o foco com Javascript, de o usuario ja estar 
em outro campo, digitando, quando o foco e mudado. 


Placeholder text 
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Voce ja deve ter visto um “placeholder”. Tradicionalmente, vlnhamos fazendo isso: 

<!DOCTYPE htm1> 

<htm1 1ang=”en-US”> 

<head> 

<meta charset=”UTF-8”> 

<title>Placeho1der, the old sty1e</title> 

</head> 

<body> 

<input name=”q” value=”Search here” 
onfocus=”if(this.value==’Search here’)this.value=’’”> 
</body> 

</html> 

HTML5 nos permite fazer isso de maneira muito mais elegante: 

<!DOCTYPE htm1> 

<htm1 1ang=”en-US”> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Placeho1der, HTML5 way</tit1e> 

</head> 

<body> 

<input name=”q” p1aceholder=”search here”> 

</body> 

</html> 


required 

Para tornar um campo de formulario obrigatorio (seu valor precisa ser 
preenchido) basta, em HTML5, incluir o atributo required: 

<input name=”login” required> 
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maxlength 

Voce ja conhecia o atributo maxlength, que limita a quantidade de caracteres 
em um campo de formulario. Uma grande lacuna dos formulario HTML foi 
corrigida. Em HTML5, o elemento textarea tambem pode ter maxlength! 


VALIDAQAO DE FORMULARIOS 

Uma das tarefas mais enfadonhas de se fazer em Javascript e validar 
formularios. Infelizmente, e tambem uma das mais comuns. HTML5 facilita 
muito nossa vida ao validar formularios, tornando automatica boa parte do 
processo. Em muitos casos, todo ele. Voce ja viu que pode tornar seus campos 
“espertos” com os novos valores para o atributo type, que ja incluem valida<;ao 
para datas, emails, URLs e numeros. Vamos um pouco alem. 


PATTERN 


O atributo pattern nos permite definir expressoes regulares de valida^ao, sem 
Javascript. Veja um exemplo de como validar CEP: 


<!DOCTYPE htm1> 

<htm1 1ang=”pt-BR”> 

<head> 

<meta charset=”UTF-8”> 

<title>0 atributo pattern</title> 
</head> 

<body> 

<form> 

<1abel for=”CEP”>CEP: 

<input name=”CEP” id=”CEP” required 
pattern=”\d{5}-?\d{3}”> 

</labei> 
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<input type=”submit” value=”Enviar”> 
</form> 

</body> 

</html> 


NOVALIDATE E FORMNOVALIDATE 

Podem haver situa$6es em que voce precisa que um formulario nao seja 
validado. Nestes casos, basta incluir no elemento form o atributo novalidate. 

Outra situa^ao comum e querer que o formulario nao seja validade 
dependendo da a$ao de submit. Nesse caso, voce pode usar no botao de 
submit o atributo formnovalidate. Veja um exemplo: 

<!DOCTYPE html> 

<html lang=’’pt-BR”> 

<head> 

<meta charset=”UTF-8”> 

<title>Salvando rascunho</title> 

<style> 

label{display:block;} 

</style> 

</head> 

<body> 

<form> 

<label>nome: <input name=”nome” requiredx/ 

label> 

<1abel>emai1: <input name=”email” type=”email” 
requi redx/label> 

<label>mensagem: <textarea name=”mensagem” 
requi redx/textareax/1 abel> 

<input type=”submit” name=”action” value=”Salvar 
rascunho” formnovalidate> 

<input type=”submit” name=”action” 
value=”Enviar”> 
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</form> 

</body> 

</html> 


CUSTOM VALIDATORS 

E claro que as validates padrao, embora atendam a maioria dos casos, nao sao 
suficientes para todas as situates. Muitas vezes voce vai querer escrever sua 
propria fun<;ao de valida<;ao Javascript. Ha alguns detalhes na especifica<;ao 
do HTML5 que vao ajuda-lo com isso: 

O novo evento oninput e disparado quando algo e modificado no valor de 
um campo de formulario. Diferente de onchange, que e disparado ao final 
da edi^ao, oninput e disparado ao editar. E diferente tambem de onkeyup e 
onkeypress, porque vai capturar qualquer modifica^ao no valor do campo, 
feita com mouse, teclado ou outra interface qualquer. 

O metodo setCustomValidity pode ser invocado por voce. Ele recebe uma 
string. Se a string for vazia, o campo sera marcado como valido. Caso 
contrario, sera marcado como invalido. 

Com isso, voce pode inserir suas validates no campo de formulario e deixar 
o navegador fazer o resto. Nao e mais preciso capturar o evento submit e trata- 
lo. Veja, por exemplo, este formulario com valida<;ao de CPF: 

<!DOCTYPE htmJ> 

<htmJ Jang=’’pt-BR”> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Custom va1idator</tit1e> 

<!— 0 arquivo cpf.js contem a funq:ao validaCPF, 

que 

recebe uma string e retorna true ou false. --> 
<script src=”cpf.js”x/script> 
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<script> 

function vCPF(i){ 

i.setCustomValidity(validaCPF(i. 
value)?’’:’CPF invalido!’) 

} 

</script> 

</head> 

<body> 

<form> 

<label>CPF: <input name=”cpf” 
oninput=”vCPF(this)”></label > 

<input type=”submit” value=”Enviar”> 
</form> 

</body> 

</html> 


DETALHES E CONTEUDO 

editAvel 

Vejamos mais duas coisas que voce certamente ja fez mais de uma vez e foram 
simplificadas pelo HTML5. 


Detalhes e sumario 

Veja um exemplo de uso dos novos elementos details e summary: 
<detai1s> 

<summary>copiando <progress max=”39248” 
value=”14718”> 37,5%</summary> 

<d1> 

<dt>Tamanho total:</dt> 

<dd>39.248KB</dd> 

<dt>T ransferido:</dt> 

<dd>14.718</dd> 
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<dt>Taxa de transference a:</dt> 
<dd>127KB/s</dd> 

<dt>Nome do arquivo:</dt> 
<dd>HTML5.mp4</dd> 

</dl> 

</details> 

Veja como um agente de usuario poderia renderizar isso: 


g * 


► Copiando 


E ao clicar: 


<- -» e fqj 


▼ Copiando !-~ 

Tamanho total: 

39.248KB 

Transferido: 

14.718 

Taxa de transference: 
127KB/S 

Nome do arquivo: 
HTML5.mp4 


1 
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CONTEUDO EDITAVEL 


Para tornar um elemento do HTML editavel, basta incluir nele o atributo 
contenteditable, assim: 


<div contenteditable=”true”> 
Edite-me... 

</div> 


Voce pode ler e manipular os elementos editaveis normalmente usando os 
metodos do DOM. Isso permite, com facilidade, construir uma area de ed^ao 
de HTML. 


DRAG-N-DROP E CORREQAO 

ortogrAfica 

Drag and Drop 

A API de Drag and Drop e relativamente simples. Basicamente, inserir o 
atributo draggable=”true” num elemento o torna arrastavel. E ha uma serie 
de eventos que voce pode tratar. Os eventos do objeto sendo arrastado sao: 

dragstart 

O objeto come^ou a ser arrastado. O evento que a fun^ao recebe tern um 
atributo target, que contem o objeto sendo arrastado. 

drag 

O objeto esta sendo arrastado. 
dragend 

A a$ao de arrastar terminou. 
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O objeto sobre o qual outro e arrastado sofre os seguintes eventos: 
dragenter 

O objeto sendo arrastado entrou no objeto target. 
dragleave 

O objeto sendo arrastado deixou o objeto target. 
dragover 

O objeto sendo arrastado se move sobre o objeto target. 
drop 

O objeto sendo arrastado foi solto sobre o objeto target 


Detalhes importantes 

A a^ao padrao do evento dragover e cancelar a a<;ao de dragging atual. Assim, 
nos objetos que devem receber drop, e preciso setar uma a<;ao de dragover 
com, no minimo, return false. 

Sele^oes de texto sao automaticamente arrastaveis, nao precisam do atributo 
draggable. E se voce quiser criar uma area para onde sele^oes de texto possam 
ser arrastadas, basta tratar esses mesmos eventos. 

Por fim, todas fun$oes de tratamento de evento de drag recebem um objeto 
de evento que contem uma propriedade dataTransfer, um dataset comum a 
todos os eventos durante essa opera$ao de drag. 

<!DOCTYPE HTML> 

<htm1> 

<head> 

cmeta content=”text/htm1; charset=UTF-8” 
http-equiv=”content-type”/> 

<tit1e>HTML5 Drag and drop demonstration</tit1e> 
<styie type=”text/css”> 
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#boxA, #boxB { 

float:left; width:100px; height:200px; 
padding:10px; margin:10px; font-size:70%; 

} 

#boxA { background-color: blue; } 

#boxB { background-color: green; } 

#drag, #drag2 { 

width:50px; padding:5px; margin:5px; 
border:3px black solid; line-height:50px; 

} 

#drag { background-color: red;} 

#drag2 { background-color: orange;} 

</style> 

<script type=”text/javascript”> 

// Quando o usuario inicia urn drag, 
guardamos no dataset do evento 

// o id do objeto sendo arrastado 
function dragStart(ev) { 

ev.dataTransfer.setData(“lD”, ev.target. 
getAttribute(‘id’)); 

} 

// Quando o usuario arrasta sobre urn dos 
paineis, retornamos 

// false para que o evento nao se propague 
para o navegador, o 

// que faria com que o conteudo fosse 

selecionado. 

function dragOver(ev) { return false; } 

// Quando sol tamos o elemento sobre urn 
painel, movemos o 

// elemento, lendo seu id do dataset do 

evento 

function dragDrop(ev) { 

var idelt = ev.dataTransfer. 

getData(“lD”); 

ev.target.appendchi1d(document. 
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getE!ementByld(ide!t)); 

} 

</script> 

</head> 

<body> 

<!— Paine! 1 —> 

<div id=”boxA” 

ondrop=”return dragDrop(event)” 
ondragover=”return dragOver(event)”> 

<!-- Draggable 1 —> 

<div id=”drag” draggab!e=”true” 
ondragstart=”return dragStart(event)”>drag me</ 

div> 

<!— Draggable 2 —> 

<div id=”drag2” draggab!e=”true” 
ondragstart=”return dragstart(event)”>drag me</ 

div> 

</div> 

<!-- Paine! 2 --> 

<div id=”boxB” 

ondrop=”return dragDrop(event)” 
ondragover=”return dragOver(event)”> 

</div> 

</body> 

</htm!> 

Exemplo 

Segue um exemplo de drag-and-drop, baseado no excelente exemplo de 
Laurent Jouanneau ( http://ljouanneau.com/lab/html5/demodragdrop.html ). 


Revisao ortografica e gramatical 


Os agentes de usuario podem oferecer recursos de revisao ortografica e 
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gramatical, dependendo do que houver disponivel em cada plataforma. Os 
desenvolvedores podem controlar o comportamento dessa ferramenta atraves 
do atributo spellcheck. Inserir spellcheck=”true” num elemento faz com que a 
revisao esteja habilitada para ele. Voce tambem pode desabilitar a revisao para 
determinado elemento, inserindo spellcheck=’’false”. 


ELEMENTOS AUDIO E VIDEO, 

E CODECS 

Audio 

Para inserir audio em uma pagina web, basta usar o elemento audio: 

<audio src=”mus.oga” controls=”true” 
autop1ay=”true”> 

O valor de controls define se um controle de audio, com botoes de play, pause, 
volume, barra de progresso, contador de tempo, etc. sera exibido na tela. Se 
for setado como “false”, sera preciso controlar o player via javascript, com 
metodos como play() e pause(). O valor de autoplay define se o audio vai 
come^ar a tocar assim que a pagina carregar. 


Origens alternativas de audio 

Todo agente de usuario deveria suportar o codec livre OggVorbis, mas, 
infelizmente, pode acontecer de seu arquivo oga nao tocar no computador 
ou celular de alguem. Quem sabe do seu chefe ou seu cliente. Entao e preciso 
saber como oferecer um formato alternative de audio. Fazemos assim: 

<audio controls=”true” autoplay=”true”> 

<source src=”mus.oga”> 

<source src=”mus.mp3”> 

<source src=”mus.wma”> 
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</audio> 


Claro, o agente de usuario pode ainda nao saber tocar nenhum desses 
formatos, ou sequer ter suporte a audio. Para esses casos, ofere^a um conteudo 
alternativo: 

<audio controls=”true” autoplay=”true”> 

<source src=”mus.oga”> 

<source src=”mus.mp3”> 

<source src=”mus.wma”> 

<p>Fa^a o <a href=”mus.mp3”>download da musicac/ 
a>.</p> 

</audio> 


Video 

O uso de video e muito semelhante ao de audio: 

<video src=”u.ogv” width=”400” height=”300”> 

E com varios elementos source: 

<video controls=”true” autoplay=”true” width=”400” 
height=”300”> 

<source src=”u.ogv”> 

<source src=”u.mp4”> 

<source src=”u.wmv”> 

<p>Faga o <a href=”u.mp4”>down1oad do video</a>.</ 
P> 

</video> 


Codecs 

E muito importante que voce inclua, nos seus elementos source de audio e 
video, informa<;ao a respeito do container e codecs utilizados. Isso vai evitar 
que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de 
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midia para, depois, descobrir que nao consegue toca-lo. E importante lembrar 
que a extensao do arquivo nao e informa^ao relevante para isso, pelo contrario, 
nao significa nada. Uma URL pode nao ter extensao de arquivo e pode levar 
a um redirecionamento. 

Para indicar ao navegador o container e codecs de determinado arquivo, usa- 
se o atributo type, no formato: 

type=’MIME-type do container; codecs=”codec de 
video, codec de audio”’ 

Por exemplo, um video em Ogg, usando os codecs Theora e Vorbis, tera seu 
source assim: 

<source src=’video.ogv’ type=’video/ogg; 
codecs=”theora, vorbis”’> 

Com MPEG-4 a coisa e um pouco mais complicada, por que e preciso indicar 
ao navegador tambem o profile do codec de video utilizado. Veja um exemplo: 

<source src=’video.mp4’ type=’video/mp4; 
codecs=”mp4v.20.240, mp4a.40.2”’> 


ELEMENTO DEVICE E STREAM API 

O ELEMENTO DEVICE 

O conteudo desse capitulo esta baseado numa especifica<;ao que ainda esta em 
status de “Working Draft”. Ou seja, as coisas ainda podem mudar bastante. 
Fique de olho no que vai acontecer com o elemento device e a Stream API, 
acessando (em ingles): http://dev.w3.org/html5/html-device/ 

Voce pode inserir em seu HTML um elemento de acesso a webcam do 
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usuario, assim: 

<device type=”media”> 

Isso vai exibir uma interface solicitando ao usuario acesso a sua webcam. Se 
ele tiver mais de uma, tambem sera permitido que ele escolha que webcam 
usar. O atributo media tambem pode conter o valor “fs”, que vai abrir uma 
caixa de sele<;ao no sistema de arquivos, permitindo ao usuario escolher um 
arquivo para fazer stream. 

O passo seguinte e conectar o stream desse seu elemento device a alguma coisa. 
Veja, por exemplo, como conecta-lo a um elemento video na propria pagina, 
fazendo com que o usuario possa ver a imagem de sua propria webcam: 

<!DOCTYPE htm1> 

<htm1 1ang=”en-US”> 

<head> 

<meta charset=”UTF-8”> 

<title>videochat, step l</tit1e> 

<script> 

function update(stream) { 

document.getEiementsByTagNamef 1 video’)[0].src = 
stream.url; 

} 

</script> 

</head> 

<body> 

<p>To start chatting, select a video camera: <device 
type=media onchange=”update(this.data)”></p> 

<video autopiay> 

</body> 
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Streams 

Voce deve ter notado, no script acima, que a fun(;ao de update recebe um 
parametro stream. Trata-se de um objeto da classe Stream, que possui uma 
propriedade url, que ja usamos acima, e um metodo record. O metodo record 
inicia a grava^ao do stream e retorna um objeto StreamRecorder. Esse ultimo 
possui um metodo stop, que retorna o arquivo que foi gravado. 
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MATHML 

O HTML5 incorpora o padrao MathML. Trata-se de uma linguagem de 
marca^ao, baseada em XML, para representa^ao de formulas matematicas. 
Voce pode ler mais sobre MathML em http://www.w3.org/Math/. Para 
incorporar codigo MathML em seu documento HTML5, nao preciso fazer 
declara^oes especiais. Basta escrever normalmente o codigo, iniciando com 
um elemento math. Veja este exemplo: 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=”UTF-8”> 

<title>MathML</title> 

</head> 

<body> 

<math xmlns=”http://www.w3.org/1998/Math/MathML”> 
<mrow> 

<mi>x</mi> 

<mo>=</mo> 

<mfrac> 

<mrow> 

<mo form=”prefix”>&mi nus ;</mo> 
<mi>b</mi> 

<mo>&PlusMinus;</mo> 

<msqrt> 
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<msup> 

<mi>b</mi> 

<mn>2</mn> 

</msup> 

<mo>&nrinus;</mo> 

<mn>4</mn> 

<mo>&lnvisibleTimes;</mo> 
<mi>a</mi> 

<mo>&lnvisibleTimes;</mo> 
<mi>c</mi> 

</msqrt> 

</mrow> 

<mrow> 

<mn>2</mn> 

<mo>&lnvisibleTimes;</mo> 

<mi>a</mi> 

</mrow> 

</mfrac> 

</mrow> 

</math> 

</body> 

</html> 


Veja como esse exemplo e renderizado no navegador: 

a 9 8 



Mesmo que voce nunca tenha visto MathML, e este codigo pare<;a um pouco 
assustador, de uma olhada com calma no codigo, comparando com a imagem 


82 






A Nova Geraqao de Aplicagoes Web I 


do resultado, e voce vai perceber que e muito simples. Talvez algo que possa 
deixa-lo confuso e a entidade &InvisibleTimes;, que aparece algumas vezes no 
codigo. Ela esta la para separar os fatores 4ac, por exemplo. Esses valores sao 
multiplicados, e o que a formula representa, mas nao queremos colocar um 
operador de multiplica<;ao entre eles, porque por conven^ao se simplesmente 
escrevemos 4ac qualquer leitor sabera que isso e uma multiplica(;ao. 

Por que entao se preocupar em inserir &InvisibleTimes;? Voce vai notar que 
se remover a entidade e a tag mo correspondente o resultado visual sera o 
mesmo. Colocamos &InvisibleTimes; porque MathML nao e so visual, e 
semantica. Um outro agente de usuario pode ter recursos de importar essa 
formula para uma ferramenta de calculo, por exemplo. 


SVG 


Assim como MathML, SVG e uma outra linguagem XML que pode ser 
incorporada com facilidade em HTML5. Voce pode ler mais sobre SVG em 
http://www.w3.org/Graphics/SVG/. SVG e uma linguagem para marca<;ao de 
graficos vetoriais. Vejamos um exemplo bem simples: 

<!DOCTYPE htm1> 

<htm1> 

<head> 

<meta charset=”UTF-8”> 

<ti tle>svG</title> 

</head> 

<body> 

<svg width=”400” height=”400”> 

<!-- Um retangulo: —> 

<rect x=”10” y=”10” v\ndth=”150” height=”50” 
stroke=”#000000” stroke-width=”5” fil 1=’’#FF0000”> 

<!-- Um polfgono: --> 

<po1ygon fin=”red” stroke=”b1ue” 
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stroke-width=”10” 

points=”250,75 279,161 369,161 297,215 
323,301 250,250 177,301 203,215 
131,161 221,161”> 

<!— um circulo —> 
ccircle cx=”70” cy=”240” r=”60” 
stroke=”#00FF00” stroke width=”5” fil 1=”#FFFFFF”> 

</svg> 

</body> 

</html> 

E veja como isso e renderizado no navegador: 

800 



E possivel fazer muito mais com SVG. A maioria dos editores de graficos 
vetoriais hoje exporta e importa automaticamente SVG, permitindo a um 
designer construir um grafico em seu editor vetorial predileto e exporta-lo 
diretamente. Em seguida, um programador pode construir javascript que 
manipula esse SVG, usando os metodos do DOM. Com isso voce pode ter 
graficos dinamicos, com anima^ao, escalaveis e com excelente qualidade 
visual, programaveis em Javascript, sem tecnologias proprietarias e plugins. 
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CANVAS API 

O ELEMENTO CANVAS 

A Canvas API permite a voce desenhar na tela do navegador via Javascript. O 
unico elemento HTML existente para isso e o elemento canvas, o resto todo e 
feito via Javascript. Veja como inserir o elemento canvas numa pagina: 

<canvas id=”x” width=”300” height=”300”x/canvas> 

Isso vai exibir um retangulo vazio. Para desenhar nele, primeiro obtemos o 
contexto de desenho, com Javascript: 

context=document.getElementByld(‘ x ’) . 
getcontext(‘2d’) 

Agora que temos um contexto, podemos desenhar nele. Vamos comepar com 
um simples retangulo: 

context.fillRectCIO, 10, 50, 150) 

Simples, nao? Que tal tentarmos algo um pouco mais complexo? De uma 
olhada no exemplo: 

<!DOCTYPE htmJ> 

<htmJ> 

<head> 

<meta charset=”UTF-8”> 

<title>canvas APi</tit1e> 

</head> 

<body> 

<canvas id=”x” width=”300” height=”300”x/canvas> 
<button onc1ick=”desenhar()”>desenhar</button> 

<script> 

function desenhar(){ 


HTML5 e CSS3 com Farinha e Pimenta 


// Obtemos o contexto 
context=document.getElementByld(‘x’). 
getcontext(‘2d’) 

//iniciamos um novo desenho 
context.beginPath Q 

//Movemos a caneta para o inicio do desenho 
context.moveTo(150,50) 

//Desenhamos as linhas 
context.1ineTo(220,250) 
context.lineTo(50,125) 
context.1ineTo(250,125) 
context.lineTo(80,250) 
context.1ineTo(150,50) 

//O desenho nao e de verdade enquanto voce 
//nao mandar o contexto pinta-lo. 

//vamos pintar o interior de amarelo 
context. fil 1 Styl e= ’ #f fO ’ 
context.fill () 

//vamos pintar as linhas de vermelho. 
context.strokeStyle=’#f00’ 
context. strokeQ 


} 

</script> 

</body> 

</html> 
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E veja o que acontece quando se clica no botao: 



desenhar ) 


Ha muito mais para voce estudar se quiser se aprofundar na Canvas API. 
Apenas para que voce tenha uma ideia, e posslvel desenhar texto, sombras, 
gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e 
transformar os objetos. 


Canvas vs SVG 

Uma duvida muito comum e quando usar Canvas, quando usar SVG. Para 
saber escolher, e preciso entender as diferen^as entre um e outro. SVG e 
vetorial, e baseado em XML, logo, acesslvel via DOM. Canvas e desenhado 
pixel a pixel, via Javascript. 

Assim, as vantagens do SVG sao: 

• O conteudo e acesslvel a leitores de tela 
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• O grafico e escalavel, nao perde resolu^ao ou serrilha ao redimensionar 

• O conteudo e acessivel via DOM 

E as vantagens do Canvas: 

• A performance e muito superior ao SVG na maioria dos casos 

• E facil desenhar via Javascript. Em SVG, e preciso fazer seu script escrever 
XML para voce. Com Canvas voce so manda desenhar, e pronto. 


SERVER-SENT EVENTS 

EventSource 

A Server-Sent Events API e uma maneira de inverter o fluxo das aplica^oes 
Ajax, fazendo com que o servidor possa disparar o envio de dados ao agente 
de usuario. Para isso, cria-se, no agente de usuario, um objeto EventSource: 

es=new EventSource(‘comm.php’) 

Isso vai abrir uma conexao HTTP para “comm.php” e mante-la escutando. 
Cada vez que o servidor enviar eventos para esse cliente, sera disparado o 
evneto message do objeto EventSource. Veja um exemplo: 

es.onmessage=function(e){ 

alert(“Chegaram dados: “+e.data) 

} 

Isso pode ser usado, por exemplo, para implementar uma interface de chat ou 
um monitor de status de alguma opera<;ao demorada ocorrendo no servidor. 
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O PROTOCOLO DE COMUNICAQAO 

Em nosso exemplo acima, a pagina comm.php envia eventos para o agente 
de usuario. Voce nao precisa se preocupar em saber como isso funciona do 
lado do cliente, uma vez que o agente de usuario faz todo o trabalho. Mas e 
importante que saiba como isso deve funcionar do lado do servidor. A URL 
de comunica<;ao deve devolver ao cliente um header Content-type: text/event- 
stream. Em seguida, envia as mensagens, que sao blocos de texto separados 
um do outro por uma linha em branco: 

data: mensagem 1 

data: a mensagem 2 tern 
data: mais de uma linha 

data: mensagem B 

O prefixo data: indica que o que segue sao os dados da mensagem. Voce 
tambem pode usar o prefixo id: 

data: mensagem 1 
id: 1 

data: a mensagem 2 tern 
data: mais de uma linha 
id: 2 

data: mensagem B 
id: 3 

Se voce enviar prefixos id em suas mensagens e o agente de usuario perder a 
conexao, ao tentar reconectar ele vai enviar o valor do ultimo id no header 
HTTP Last-Event-ID. Com isso voce pode, por exemplo, enviar as mensagens 
do chat do ponto em que parou. 
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DOM E HTML5 

O Modelo de Objetos do Documento (DOM, na sigla em ingles) e a interface 
entre a linguagem Javascript e os objetos do HTML. DOM e o metodo padrao 
para constru^ao de aplica^oes ricas com Javascript e e amplamente conhecido 
e utilizado. Neste capitulo, supondo que voce ja conhece DOM para HTML 
4 ou XHTML, vamos nos focar na diferen^a entre as versoes anteriores do 
DOM e a do HTML 5. 


POR QUE DOM? 

Os primeiros navegadores a incorporar um motor de Javascript tinham 
alert, prompt, document.write e mais meia duzia de maneiras de se interagir 
com o usuario. E so. A ideia de acessar a arvore de objetos do HTML 
trouxe poder as interfaces com o usuario na web. A ideia era tao boa que 
os fabricantes de navegadores nao puderam esperar ate que tivessemos uma 
especificac^ao padrao que atendesse suas necessidades, e criaram cada um 
seu proprio metodo de resolver o problema. Isso resultou em anos e anos de 
incompatibilidade, em que era preciso escrever uma versao de seus scripts 
para cada navegador. 

Queremos, com certeza, evitar uma nova guerra de padroes. Por isso 
recomendamos a voce, por mais sedutor que pare$a utilizar um recurso 
proprietario Javascript, que se atenha ao DOM. 
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VAMOS AS DIFERENQAS 

getElementsByClassName 

Esse e um sonho antigo de todo desenvolvedor Javascript. Com HTML5 voce 
pode fazer: 

destaques = document.getElementsByClassName(‘destaq 

ue’) 

E isso retornara todos os elementos do HTML que possuem a classe “destaque”. 
innerHTML 

Outro sonho antigo que se torna realidade. A propriedade innerHTML e uma 
ideia tao boa que todos os navegadores atuais ja a suportam ha muito tempo 
e todo desenvolvedor web sabe usa-la. Apesar disso, ela nunca havia sido 
descrita como um padrao. 

Se porventura voce nunca viu a propriedade innerHTML em a<;ao (puxa, onde 
voce estava nos ultimos dez anos?) saiba que ela contem uma string, o conteudo 
HTML da pagina. E voce tem acesso de leitura e escrita a essa propriedade. 

Veja um exemplo de innerHTML: 

function adicionaltem(nome){ 

document.getEJementByld(‘1ista’).innerHTML += 

‘<1i>’+nome+’</1i>’ 

} 


activeElement e hasFocusO 

O documento HTML5 tem uma nova propriedade, activeElement, que 
contem o elemento que possui o foco no momento. O documento tambem 
possui o metodo hasLocusQ, que retorna true se o documento contem o foco. 
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Seu usuario pode estar trabalhando com multiplas janelas, abas, frames, ou 
mesmo ter alternado para outro aplicativo deixando o navegador com sua 
aplica^ao Javascript rodando em segundo piano. O metodo hasFocus() e uma 
conveniente maneira de tratar a^oes que dependem do foco na aplica<;ao atual. 


Veja um exemplo de script dependente de foco: 

<!DOCTYPE htm1> 

<htmi 1ang=”pt-BR”> 

<head> 

<meta charset=”UTF-8”> 

<ti ti e>Noti fie r</ti ti e> 

<script> 

function notify(text){ 

document.getElementByld(‘msg’). 
innerHTML+=’<p>’+text+’</p>’ 
titleFlickO 

} 

function titieFlick(){ 
if(document.hasFocus()){ 
document. ti tJ e= ’ Noti fie r ’ 
return 

} 

document. ti ti e=document. ti tJ e== ’ Noti fier ’ ? ’ * 
Notifier’: ’Notifier’ 

setTimeout(‘titieFiickO ’ , 500) 

} 

</script> 

</head> 

<body> 

<input type=”button” id=”notify” vaiue=”Notify in 5 
seconds” 

onc1ick=”notify(‘wiU notify in 5 seconds...’);setTi 
meout(‘notify(\’Event shoot!\’)’,5000)”> 

<div id=”msg”x/div> 

</body> 
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</html> 


getSelectionO 

Os objetos document e window possuem um metodo getSelectionO, que 
retorna a sele^ao atual, um objeto da classe Selection. A sele^ao tem, entre 
outros, os seguintes metodos e propriedades: 

Usando getSelectionO hoje 

A maioria dos navegadores ainda nao teve tempo de se atualizar em rela^ao 
a especificapao e, retorna uma string quando voce chama document. 
getSelectionO e um objeto Selection quando voce chama window.getSelection(). 
Como esperamos que num futuro proximo o comportamento de document. 
getSelectionO mude, sugerimos que voce prefira usar o metodo de window 
por enquanto. 

anchorNode 

O elemento que contem o inicio da sele^ao 
focusNode 

O elemento que contem o final da sele^ao 

selectAllChildern (parentNode) 

Seleciona todos os filhos de parentNode 

deleteFromDocument() 

Remove a sele^ao do documento 

rangeCount 

A quantidade de intervalos na sele<;ao 
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getRangeAt( index) 

Retorna o intervalo na posi^ao index 

addRange (range) 

Adiciona um intervalo a sele^ao 

removeRange(range) 

Remove um intervalo da sele^ao 


Intervalos de seleqao 

Voce deve ter notado acima que uma sele^ao e um conjunto de intervalos, 
da classe Range. Cada intervalo possui, entre outros, os seguintes metodos 
e propriedades: 

deleteContentQ 

Remove o conteudo do intervalo 
setStart(parent, offset) 

Seta o inicio do intervalo para o caractere na posi$ao offset dentro do elemento 
DOM parent 

setEnd(parent, offset) 

Seta o final do intervalo para o caractere na posi^ao offset dentro do elemento 
DOM parent 

Tanto os objetos Selection quanto os objetos Range retornam o texto da 
sele^ao quando convertidos para strings. 

document.head 

O objeto document ja possuia uma propriedade body, uma maneira 
conveniente de acessar o elemento body do HTML. Agora ele ganhou uma 
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propriedade head, maneira tambem muito conveniente de acessar o elemento 
head. 


Selector API 

A Selector API nao e novidade do HTML5, e anterior a ele. Mas como ainda 
e desconhecida de parte dos desenvolvedores, convem dizer que ela existe, e 
que continua funcionando no HTML5. Com a selector API voce pode usar 
seletores CSS para encontrar elementos DOM. 


querySelector e jQuery 

Se voce e usuario de jQuery, ja entendeu tudo. E exatamente a mesma ideia 
dos seletores jQuery. 

Alguns preocupados usuarios de jQuery tem nos perguntado se nao e 
melhor, em termos de performance usar a Selector API. Mas e claro que e. 
Se voce realmente souber programar, escrever todo o seu codigo sempre sera 
melhor em performance que usar um framework. Mas o ganho, nesse caso, 
e desprezivel. Talvez o conforte saber que, nos navegadores em que isto esta 
disponlvel, a propria jQuery usa internamente a Selector API. 

A Selector API expoe duas fun^oes em cada um dos elementos DOM: 
querySelector e querySelectorAll. Ambas recebem como argumento uma 
string com um seletor CSS. A consulta e sempre feita na subtree do elemento 
DOM a partir do qual a chamada foi disparada. A querySelector retorna o 
primeiro elemento que satisfaz o seletor, ou null caso nao haja nenhum. A 
querySelectorAll retorna a bsta de elementos que satisfazem o seletor. 

Veja, neste exemplo, um script para tabelas zebradas com Selector API: 


<!DOCTYPE htm1> 
<htm1 1ang=”pt-BR”: 
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<head> 

<meta charset=”UTF-8”> 

<title>zebra</title> 

<style> 

.zebraon{background:silver} 

</styie> 

<script> 

wi ndow.on1oad=functionO{ 

var zebrar=document.querySe1ectorAnC‘-zebra tbody 

I 

for(var i=0;i<zebrar.iength;i+=2) 
zebrar[i].className=’zebraon’ 

} 

</script> 

</head> 

<body> 

<tab1e c1ass=”zebra”> 

<theadxtr> 

<th>Vendedor</th> <th>Tota1</th> 

</trx/thead> 

<tbodyxtr> 

<td>Manoe1</td> <td>12.300,00</td> 

</trxtr> 

<td>3oaquim</td> <td>21.300,00</td> 

</trxtr> 

<td>Maria</td> <td>13.200,00</td> 

</trxtr> 

<td>Marta</td> <td>32.100,00</td> 

</trxtr> 

<td>Antonio</td> <td>23.100,00</td> 

</trxtr> 

<td>Pedro</td> <td>31.200,00</td> 

</trx/tbody> 

</table> 

</body> 

</html> 
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Caracteristicas especiais de DomNodeList 

As listas de elementos retornadas pelos metodos do DOM nao sao Arrays 
comuns, sao objetos DomNodeList, o que significa que, entre outros metodos 
especiais, voce pode usar list [0] ou list(0) para obter um elemento da lista. 
Tambem pode usar list [“name”] ou list(“name”) para obter um objeto por seu 
nome. Duas ad^oes interessantes do HTML5 ao usar este ultimo metodo: 

O objeto e buscado pelos atributos name ou id. 

Uma lista de campos de formulario com o mesmo valor no atributo name 
(uma lista de radio buttons, por exemplo) sera retornada caso mais de um 
objeto seja encontrado. Essa lista contem um atributo especial, value, muito 
conveniente. Ele contem o valor do radio marcado e, ao ser setado, marca o 
radio correspondente. 


Datasets 


Voce pode atribuir dados arbitrarios a um elemento HTML qualquer, 
prefixando seus atributos com “data-”. Por exemplo: 

<img src=”computadorl.jpg” a1t=”Novo GNexius 
Forethinker” id=”cl” 

data-processor=”35Ghz” data-memory=”48GB” 
data-harddrive=”16TB” data-screen=’45”’ > 

Voce pode acessar esses valores via Javascript, atraves do atributo dataset, assim: 

var img=document.getEJ ementByld(‘cl’) 
proc=img.dataset.processor 


As propriedades de dataset tern permissao de leitura e escrita. 


HTML5 e CSS3 com Farinha e Pimenta 


NOVOS EVENTOS DOM 

UMA PALAVRA SOBRE EVENTOS 

O suporte ao tratamento de eventos disparados pelo usuario e parte essencial 
do DOM. HTML5 oferece a voce um extenso conjunto de novos eventos. 
Vamos dar uma olhada nos mais interessantes: 

Elementos multimidia 

oncanplay 

O elemento audio ou video ja tem dados suficientes no buffer para come<;ar 
a tocar. 

oncanplay through 

O elemento audio ou video ja tem dados suficientes no buffer para come^ar a 
tocar e, se a tranferencia de dados continuar no ritmo em que esta ocorrendo, 
estima-se que tocara ate o final sem interrup^oes. 

ondurationchange 

O elemento audio ou video teve seu atributo duration modificado. Isso 
acontece, por exemplo, ao alterar a origem da midia. 

onemptied 

O elemento audio ou video teve um erro de retorno vazio de dados da rede. 
O retorno vazio acontece quando, por exemplo, voce tenta invocar o metodo 
play de um elemento que ainda nao tem uma origem de midia definida. 

onended 

O video ou audio chegou ao fim. 

onloadeddata 

Os dados come^aram a ser carregados e a posi$ao atual de playback ja pode 
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ser renderizada. 

onloadedmetadata 

Os metadados foram carregados. Ja sabemos as dimensoes, formato e dura^ao 
do video. 

onloadstart 

Os dados come^aram a ser carregados. 
onpause 

O usuario clicou em pause. 
onplay 

O usuario clicou em play ou o playback come^ou por causa do atributo 
autoplay. 

onplaying 

O video ou audio esta tocando. 
onprogress 

O agente de usuario esta buscando dados do video ou audio. 

EvENTOS EM CAMPOS DE FORMULARIO 

oninput 

O usuario entrou com dados no campo. 
oninvalid 

O campo nao passou pela valida^ao. 
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EvENTOS GERAIS 

oncontextmenu 

O usuario disparou um menu de contexto sobre o objeto. Na maioria dos 
sistemas Desktop, isso significa clicar com o botao direito do mouse ou 
segurando uma tecla especial. 

onmousewheel 

A rodinha do mouse foi acionada. 
onbeforeprint 

Disparado antes da impressao da pagina. Voce pode usa-lo para modificar, 
esconder ou exibir elementos, preparando a pagina para impressao. 

onafterprint 

Disparado apos a impressao da pagina. Voce pode usa-lo para reverter o 
status anterior a impressao. 

onhashchange 

A ultima por<;ao da URL, apos o hash (#), foi modificada. 
onoffline 

O agente de usuario ficou offline. 
ononline 

O agente de usuario esta novamente conectado. 
onredo 

O usuario disparou a a<;ao de “Refazer”. 

onundo 

O usuario disparou a a<;ao de “Desfazer”. 
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Drag-and-drop 


ondrag 

ondragend 

ondragenter 

ondragleave 

ondragover 

ondragstart 

ondrop 




Atributos de evento 

A especificapao do HTML5 padronizou um formato de atribuipao de eventos 
que ja era amplamente utilizado. Voce pode atribuir eventos atraves de 
atributos HTML com o nome do evento. Por exemplo: 

<input onblur=”return verifica(this)”> 

E claro que voce pode continuar usando o metodo do DOM addEventListener, 
com a vantagem de poder atribuir varios listeners ao mesmo evento. 


MENUS E TOOLBARS 

O ELEMENTO MENU 

O elemento menu e usado para definir menus e barras de ferramenta. 
Dentro do menu, voce pode inserir submenus ou comandos. Para inserir 
submenus, basta inserir outros elementos menu. Para definir comandos, 
voce pode inserir: 


Um link, um elemento a com atributo href; 

Um botao, um elemento button; 

Um botao, um elemento input com o atributo type contendo button, 
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submit, reset ou image; 

Um radiobutton, um elemento input com o atributo type contendo radio; 
Um checkbox, um elemento input com o atributo type contendo checkbox; 
Um elemento select, contendo um ou mais options, define um grupo 
de comandos 

Um elemento qualquer com o atributo accesskey 
Um elemento command 


TlPOS DE COMANDO 

Ha tres tipos de comando: 

command 

Uma ac;ao comum; 

checkbox 

Uma a^ao que pode estar no status de ligada ou desligada, e alterna entre esses 
dois stauts quando clicada; 

radio 

Uma acjao que pode estar no status de ligada ou desligada, e quando clicada 
vai para o status de ligada, deligando todas as a$oes com o mesmo valor no 
atributo radiogroup; 

Da lista de elementos possiveis para definir comandos, os tres primeiros, 
link, button e input button, definem comandos do tipo command. O quarto 
elemento, radiobutton, define um comando do tipo radio. O quinto, checkbox, 
define um comando do tipo checkbox. 

O sexto elemento, o select, vai definir um grupo de comandos. Se o select tiver 
o atributo multiple, definira uma lista de comandos do tipo checkbox. Caso 
contrario, os comandos serao do tipo radio, tendo o mesmo radiogroup. 
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No setimo caso, um elemento qualquer com tecla de acesso, o tipo de comando 
vai depender do tipo de elemento que recebeu accesskey. 


O ELEMENTO COMMAND 

Por fim, temos o oitavo metodo, o elemento command. Neste caso o tipo de 
comando dependera do valor do atributo type. Veja um exemplo de como 
usa-lo: 

<command type=’’command” label =”Salvar” 
onclick=”salvarQ” > 


Prefira nao usar command, por enquanto 

Por que a especificapao permite que se use o novo elemento command para 
definir comandos, e ao mesmo tempo permite que se use os velhos elementos 
como input, button e select para isso? Para possibilitar ao desenvolvedor 
oferecer alguma compatibilidade com navegadores antigos. Veja este exemplo: 

<!DOCTYPE html> 

<html> 

<head> 

cmeta charset=”UTF-8”> 

<title>Menus</title> 

</head> 

<body> 

<menu type=”toolbar”> 

<li> 

cmenu label=”File”> 

<button type=”button” 
onclick=”fnewO”>New. . .</button> 

<button type=”button” 
onclick=”fopenC)”>open...</button> 
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<button type=”button” 
one!ick=”fsave 0”>Save</button> 

<button type=”button” 
onc1ick=”fsaveasO”>save as.. .</button> 

</menu> 

</li> 

<1i> 

<menu ~\ abeW’Edi t”> 

<button type=”button” 
one!ick=”ecopyC)”>copy</button> 

<button type=”button” 
one!ick=”ecutO”>Cut</button> 

<button type=”button” 
one!ick=”epasteO”>Paste</button> 

</menu> 

</li> 

<1i> 

<menu ~\ abeW’Hel p”> 

<1i><a h ref=”he1p.html”>He1p</a></ 
1i> 

<lixa href=”about.html ”>About</a></ 
1i> 

</menu> 

</li> 

</menu> 

</body> 

</html> 


O agente de usuario deveria renderizar algo como: 


( File ) ( Edit ) ( Help ) 
Copy 
Cut 
Paste 


Um agente de usuario que nao conhece o novo elemento menu vai entender i 
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codigo como listas aninhadas com botoes e links. E vai renderizar isso assim: 


( New... ) ( Open... ) [ Save ) [ Save as... | 

( Copy ] fcuu) [, Paste ] 

• Help 
About 


Exemplo DE MENU 

Nao esta bonito, mas e perfeitamente acesslvel. E o visual pode ser bem 
trabalhado com CSS. A mesma coisa poderia ser escrita com o elemento 
command: 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=”UTF-8”> 

<title>Menus</title> 

</head> 

<body> 

<menu type=”toolbar”> 

<menu label=”File”> 

<command onclick=”fnewO” 

label=”New...”> 

<command onclick=”fopen()” 

label=”Open...”> 

ccommand onclick=”fsave()” label=”Save”> 
<command onclick=”fsaveasO” label=”Save 

as...”> 


</menu> 
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<menu label=”Edit”> 

<command onclick=”ecopy()” label =”Copy”> 
<command onclick=”ecut()” label=”Cut”> 
<command onclick=”epasteO” 

label=”Paste”> 

</menu> 

<menu label=”Help”> 

<command onclick=”location=’help.html 

label=”Help”> 

ccommand onclick=”location=’about.html 

label=”About”> 

</menu> 

</menu> 

</body> 

</html> 

Mas um agente de usuario que nao conhece os elementos menu e command 
nao vai mostrar absolutamente nada. 


TIPOS DE LINKS 

Links 

A possibilidade de linkar documentos e o que torna a Web o que ela e. Existem 
duas maneiras principals de linkar documentos, os elementos a e link. O 
elemento a cria um link no conteudo da pagina. Voce conhece sua sintaxe: 

<a href=”http://visie.com.br”>visie</a> 

O elemento link, por sua vez, cria um metadado, um link que nao e mostrado 
no conteudo, mas o agente de usuario usa de outras maneiras. O uso mais 
comum e vincular um documento a uma folha de estilos:| 
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<1ink rel=”sty1esheet” href=”estilo.css”> 

Note o atributo rel=”stylesheet”. O atributo rel pode estar presente nos 
elementos a e link, e ter uma serie de valores: 


Metadados de navegaqao 


archives 

os arquivos do site 

author 

a pagina do autor do documento atual 

bookmark 

o permalink da se<;ao a que este documento pertence 

first 

o primeiro documento da serie a qual este pertence 

help 

ajuda para esta pagina 

index 

o indice ou sumario que inclui o link para esta pagina 

last 

o ultimo documento da serie a qual este pertence 

license 

a licensa que cobre este documento 

next 

o proximo documento da serie a qual este pertence 

prefetch 

o agente de usuario deve fazer cache desse link em segundo 
piano tao logo o documento atual tenha sido carregado. 
O autor do documento indica que este link e o provavel 
proximo destino do usuario. 

prev 

o documento anterior da serie a qual este pertence 

search 

a busca deste site 

up 

0 documento um nivel acima deste 


O Opera nos da um interessante exemplo de como um agente de usuario pode 
exibir estes links: 
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alternate 

um formato alternative para o conteudo atual. Precisa estar 
acompanhado do atributo type, contendo o tipo MIME do 
formato. Por exemplo, para indicar o RSS da pagina atual 

usamos: 

<link rel="alternate” type=”application/rss+xmr href=”rss. 
xml”> 

icon 

o icone que representa esta pagina 

pingback 

a URL de pingback desta pagina. Atraves desse enderec^o 
um sistema de blogging ou gerenciador de conteudo pode 
avisar automaticamente quando um link para esta pagina for 
inserido. 

stylesheet 

a folha de estilo linkada deve ser vinculada a este documento 
para exibi^ao 


Comportamento dos links na pagina: 


external 

indica um link externo ao dominio do documento atual 

nofollow 

indica que o autor do documento atual nao endossa o 
conteudo desse link. Os robos de indexa^ao para motores de 
busca podem, por exemplo, nao seguir este link ou levar em 
conta o nofollow em seu algoritmo de ranking. 

noreferrer 

o agente de usuario nao deve enviar o header HTTP Referer se 
o usuario acessar esse link 

sidebar 

o link deve ser aberto numa sidebar do navegador, se este 
recurso estiver disponivel 
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MICRODATA 


Semantica adicional 

De um olhada no seguinte codigo: 

<!DOCTYPE htm1> 

<htm1> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Microdata l</title> 

</head> 

<body> 

<hl>Resu1tados do trimestre</hl> 

<o1> 

<li> 

<d1> 

<dt>nome</dt> <dd>Joaquim</ 
dd> 

<dt>tota1</dt> <dd>10.764</ 
dd> 

</d1> 

</1i> 

<li> 

<d1> 


<dt>nome</dt> <dd>Manoe1</dd> 
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<dt>tota1</dt> <dd>12.449</ 
dd> 

</d1> 

</1i> 

<li> 

<d1> 

<dt>nome</dt> <dd>Antonio</ 
dd> 

<dt>tota1</dt> <dd>9.202</dd> 

</d1> 

</1i> 

<li> 

<d1> 

<dt>nome</dt> <dd>Pedro</dd> 
<dt>tota1</dt> <dd>17.337</ 
dd> 

</d1> 

</1i> 

</o1> 

</body> 

</html> 

A Microdata API nos permite tornar esta estrutura semantica um pouco 
mais especifica, definindo o que e o conteudo de cada elemento. Veja este 
outro exemplo: 

<!DOCTYPE htm1> 

<htm1> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Microdata 2</tit1e> 

</head> 

<body> 

<hl>Resu1tados do trimestre</hl> 

<ol > 

<li> 

<dl itemscope> 

<dt>nome</dt> <dd 


A Nova Gerapao de Aplicapoes Web II 


itemprop=”nome”>3oaquim</dd> 

<dt>total</dt> <dd 
itemprop=”total”>10.764</dd> 

</d1> 

</1i> 

<1i> 

<dl itemscope> 

<dt>nome</dt> <dd 
itemprop=”nome”>Manoe1</dd> 

<dt>total</dt> <dd 
itemprop=”total”>12.449</dd> 

</d1> 

</1i> 

<li> 

<dl itemscope> 

<dt>nome</dt> <dd 
itemprop=”nome”>Antonio</dd> 

<dt>total</dt> <dd 
itemprop=”total”>9.202</dd> 

</d1> 

</1i> 

<li> 

<dl itemscope> 

<dt>nome</dt> <dd 
itemprop=”nome”>Pedro</dd> 

<dt>total</dt> <dd 
itemprop=”total”>17.337</dd> 

</d1> 

</1i> 

</o1> 

</body> 

</html> 

Adicionamos atributos especias, itemscope e itemprop. Cada elemento 
itemscope define um item de dados. Cada itemprop define o nome de uma 
propriedade. O valor da propriedade e o conteudo da tag HTML. A Microdata 
API nos fornece acesso especial a esses dados. Veja como acessar esses dados: 

resell tados=document. getltems Q 


iH 
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for(var i=0;i<resu1tados.1ength;i++){ 

a1ert(resu1tados[i].properties.nome[0].content+”: 

R$ “+ 

resultados[i].properties.total[0].content) 

} 


Diferentes tipos de dados 

No exemplo acima, temos uma listagem de pessoas. Agora imagine que voce 
precise ter, no mesmo documento, uma listagem de pessoas e carros. Poderia 
escrever assim: 

<!DOCTYPE htm1> 

<htm1> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Microdata 3</title> 

</head> 

<body> 

<hl>Resu1tados do trimestre</hl> 

<o1> 

<li> 

<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Doaquitn</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>10.764</dd> 

</d1> 

</1i> 

<ii> 

<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Manoe1</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>12.449</dd> 

</d1> 
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<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Antonio</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>9.202</dd> 
</d1> 

</1i> 

<li> 

<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Pedro</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>17.B37</dd> 
</d1> 

</1i> 

</ol > 

<h2>Carros mais vendidos</h2> 

<ol> 

<li> 

<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Fusca</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>382</dd> 
</d1> 

</1i> 

<li> 

<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Brasi1 i a</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>298</dd> 
</d1> 

</1i> 

<li> 

<dl itemscope> 

<dt>nome</dt> 

<dd itemprop=”nome”>Corce1</dd> 
<dt>total</dt> 
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<dd itemprop=”tota1”>102</dd> 

</d1> 

</1i> 

</o1> 

</body> 

</html> 

Note que pessoas e carros tem propriedades em comum, nome e total. 
Quando voce executar document.getItems() vai obter uma lista de todos os 
elementos com itemscope. Como obter uma lista apenas de pessoas ou de 
carros? Voce pode adicionar a cada item um atributo itemtype, que diz de que 
tipo de entidade sao aqueles dados: 

<!DOCTYPE htm1> 

<htm1> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>Microdata 4</title> 

</head> 

<body> 

<hl>Resu1tados do trimestre</hl> 

<ol> 

<li> 

<dl itemscope=” itemtype=”pessoa”> 
<dt>nome</dt> 

<dd itemprop=”nome”>3oaquim</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>10.764</dd> 

</d1> 

</1i> 

<li> 

<dl itemscope=” itemtype=”pessoa”> 
<dt>nome</dt> 

<dd itemprop=”nome”>Manoe1</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>12.449</dd> 

</d1> 

</1i> 
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<dl itemscope=” itemtype=”pessoa”> 
<dt>nome</dt> 

<dd itemprop=”nome”>Antonio</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>9.202</dd> 
</d1> 

</1i> 

<li> 

<dl itemscope=” itemtype=”pessoa”> 
<dt>nome</dt> 

<dd itemprop=”nome”>Pedro</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>17.337</dd> 
</d1> 

</1i> 

</ol > 

<h2>Carros mais vendidos</h2> 

<ol> 

<li> 

<dl itemscope=” itemtype=”carro”> 
<dt>nome</dt> 

<dd itemprop=”nome”>Fusca</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>382</dd> 
</d1> 

</1i> 

<li> 

<dl itemscope=” itemtype=”carro”> 
<dt>nome</dt> 

<dd itemprop=”nome”>Brasn1 ia</dd> 
<dt>total</dt> 

<dd itemprop=”tota1”>298</dd> 
</d1> 

</1i> 

<li> 

<dl itemscope=” itemtype=”carro”> 
<dt>nome</dt> 

<dd itemprop=”nome”>Corce1</dd> 
<dt>total</dt> 
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<dd itemprop=”tota1”>102</dd> 
</d1> 

</1i> 

</o1> 

</body> 

</html> 


Agora voce pode executar: document.getItems( carro’) para obter so os carros, 
por exemplo. 


Falando um idioma comum 


Voce deve ter notado que pode definir seus proprios padroes de metadados 
com microdata. Recomendo que, antes de criar seu proprio formato, 
verifique se o mesmo problema nao ja foi resolvido por alguem. O site 
www.data-vocabulary.org contem alguns desses formatos padronizados. Por 
exemplo, para descrever os dados de sua empresa ou organiza^o, nao invente 
seu proprio formato, use o formato definido em http://www.data-vocabulary. 
orgjOrganization. O valor de itemtype deve ser a propria URL que documenta o 
formato. Veja como fica: 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=”UTF-8”> 

<tit1e>visie Padroes Web</tit1e> 

</head> 

<body> 

<address itemscope=” itemtype=”http://data- 
vocabul ary. org/organi zati on”x/address> 

<hl itemprop=”name”> 
visie Padroes Web 
</hl> 

<div itemprop=”address” itemscope=” 
itemtype=”http://data-vocabulary.org/Address”> 

<p itemprop=”street-address”> 

Alameda dos Ubiatans, 257 - Pi anal to 
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Paulista 

</p> 

<P> 

<span itemprop=”1ocality”>Sao Pau1o</ 
span> - <span itemprop=”region”>SP</span> - <span 
itemprop=”country-name”>Brasil</span> 

</p> 

<p itemprop=”posta1-code”> 

04070-0B0 

</p> 

</div> 

<div itemprop=’’te1 ”> 

+55.11.3477-B347 
</div> 

</body> 

</html> 

Claro que a vantagem de usar o formato padronizado ao inves de inventar o 
seu nao e apenas nao ter o trabalho de pensar os nomes das propriedades. Os 
sistemas de busca, e outros sistemas que acessem seu site, podem entender e 
tratar esses dados. O Google ja faz isso 3 . 


HISTORICO DE SESSAO E 
API STORAGE 

Um dos grandes desafios de usabilidade ao se construir aplicapoes web com 
a tecnologia atual e apresentar um modelo de navegapao consistente para o 
usuario. Duas grandes lacunas nos impediam de faze-lo: 

1. Nao havia uma forma simples de fazer com que as a<;oes locais do usuario 
numa pagina fossem refletidas na proxima. Por exemplo, se o usuario abre 
e fecha itens em um menu em arvore e em seguida navega para a proxima 
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pagina, era muito dificil fazer com que o menu aparece no mesmo estado na 
segunda pagina. 

2. Nao havia uma forma simples de fazer com que as a^oes do usuario numa 
pagina Ajax respondessem corretamente aos botoes de controle de historico 
do navegador (voltar e avan<;ar). 

HTML5 traz formas simples de solucionar os dois problemas. 


Historico de Sessao 

Voce provavelmente conhece o objeto history do navegador e seus metodos 
go, back e forward. Ele nos permite, via javascript, um controle basico do 
historico de navega^ao. O mesmo controle que o usuario, voltar e avan^ar. 

O objeto history foi vitaminado no HTML5 com dois novos metodos: 

• pushState(data,title[,url]): acrescenta uma entrada na lista de historico. 

• replaceState(data,title [,url]): modifica a entrada atual na lista de historico. 

Claro, se seu script tentar associar uma URL fora do dominio do script a lista 
de historico, isso vai resultar numa exce^ao de seguran^a. 

Com isso, voce pode acrescentar itens a lista de historico, associando dados ou 
mesmo uma URL a eles. Por exemplo, digamos que voce tenha tres elementos 
de conteudo em sua pagina e um script que exiba um por vez de acordo com 
os cliques do usuario no menu: 

function showcontent(n){ 

// Escondemos todos os elementos de conteudo 
forfvar i=l;i<4;i++) 

document.getElementByld(‘cont’+i).styi e. 
disp1ay=’none’ 

// Exibimos o elemento escolhido 
document.getEiementByld(‘cont’+n).style. 
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disp1ay=’block’ 

} 

vamos fazer com que nosso script acrescente uma 
linha de historico ao seiecionar um eiemento: 
function showPage(n){ 

// Escondemos todos os elementos de conteudo 
forCvar i=l;i<4;i++) 

document.getElementByld(‘cont’+i).styi e. 
disp1ay=’none’ 

// Exibimos o elemento escolhido 
document.getEiementByld C ‘cont’+n).style. 
display=’block’ 

} 

function showcontent(n){ 

// Mostramos o conteudo escolhido 
showPage(n) 

// Salvamos a pagina atual no historico 
history.pushstate({page:n},’conteudo ‘+n) 

} 

Fazendo isso, cada vez que o usuario escolher um item no menu, o elemento sera 
exibido e uma linha sera acrescentada no historico. O usuario podera acessar 
normalmente esses itens de historico usando o botao de voltar do navegador. 
Cada vez que ele usar o historico, sera disparado um evento popstate. Assim, 
para que nosso script esteja completo, basta tratar esse evento: 

function showPage(n){ 

// Escondemos todos os elementos de conteudo 
forCvar i=l;i<4;i++) 

document.getElementByld(‘cont’+i).styi e. 
disp1ay=’none’ 

// Exibimos o elemento escolhido 
document.getEiementByld(‘cont’+n).style. 
display=’block’ 
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function showContent(n){ 

// Mostramos o conteudo escolhido 
showPage(n) 

// Salvamos a pagina atuai no historico 
history.pushstate({page:n},’conteudo ‘+n) 

} 

// Quando o usuario navegar no historico, mostramos 
a pagina reiacionada: 

window.onpopstate=function(e){ 
if(e.state) 

showPage(e.page) 

} 


localStorage e sessionStorage 

Ate o HTML4, quando precisavamos armazenar dados no agente de usuario 
que persistissem entre as paginas, usavamos Cookies. Cookies nos permitiam 
armazenar o status de um menu javascript que precisava ser mantido entre as 
paginas, lembrar o nome do usuario, o historico de operates realizadas por 
ele ou a ultima vez que ele visitou nosso site. 

Com o aumento da complexidade das aplica$6es baseadas em web, duas 
grandes limita^oes dos Cookies nos incomodam: 

Interface complexa: o codigo para armazenar Cookies envolve complexos 
calculos com datas e controle do nome de dominio. 


Limite de armazenamento: alguns agentes de usuario permitiam o 
armazenamento de no maximo 20 Cookies, com apenas 4KB cada. 

HTML5 traz uma nova maneira de armazenar dados no client, a API Storage. 
Um objeto Storage possui os metodos: 

• getltem(key): obtem um valor armazenado no Storage 
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• setltem(key,value) guarda um valor no Storage 

• removeltem(key) exclui um valor do Storage 

• clear() limpa o Storage 

Uma outra complica<;ao dos Cookies resolvida pela API Storage e o fato 
de Cookies so armazenarem strings, nos obrigando a serializar arrays e 
objetos javascript. A especifica<;ao da API Storage rege que qualquer valor 
javascript pode ser armazenado e recuperado. Infelizmente, em alguns dos 
navegadores em que testamos, os valores sao convertidos para strings assim 
como nos Cookies. Torpamos para que os agentes de usuario implementem 
corretamente esse recurso. 

Estao disponiveis dois objetos no escopo global (window): localStorage 
e sessionStorage. O objeto localStorage armazena os dados no client sem 
expirapao definida. Ou seja, se o usuario fechar o navegador e voltar ao site 
semanas depois, os dados estarao la. O sessionStorage armazena os dados 
durante a sessao atual de navega(;ao. 

O codigo para armazenar um valor na Storage se parece com isso: 
localStorage.setItem(‘userChoice’,33) 

E quando voce precisar desse valor, em outra pagina: 

1ocalStorage.getltem(‘userchoice’) 

Essa interface ja e muito mais simples que a de Cookies. Mas pode bear 
melhor. Voce pode usar o Storage como um array. Por exemplo: 

ifC!sessionstorage[ 1 theme’]){ 

sessionStorage[‘theme’] = ’oldfu rnitu re’; 

} 

Nao ha como isso ser mais simples! Alem disso, o espapo de armazenamento 
sugerido pela documentapao e de 5MB para cada dominio, resolvendo, 
acredito que por mais uma decada, o problema de espa^o de armazenamento 
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local. 


APLICAQOES OFFLINE 

Caching 


HTML5 prove uma maneira de se indicar ao navegador que elementos sao 
necessarios e devem ser postos em cache para que uma aplica<;ao funcione 
offline. O exemplo da documenta^ao oficial e bastante esclarecedor. De uma 
olhada na seguinte pagina: 

<!DOCTYPE HTML> 

<htm1> 

<head> 

<title>Ciock</title> 

<script src=”c1ock. js”x/script> 

<1ink rei=”styiesheet” href=”c1ock.css”> 

</head> 

<body> 

<p>The time is: <output id=”c1ock”x/outputx/p> 
</body> 

</html> 


Trata-se de um widget de relogio. Para funcionar, este HTML depende dos 
arquivos “clock.js” e “clockxss”. Para permitir que o usuario acesse esta pagina 
offile, precisamos escrever um arquivo de manifesto, indicando que URLs 
devem ser postas em cache. Vamos preparar uma nova versao do widget, 
contendo o manifesto, que e um arquivo com a extensao .manifest e que deve 
ser servido com o tipo MIME text/cache-manifest. Em nosso caso, o arquivo 
vai se chamar clock, manifest e tera o seguinte conteudo: 

CACHE MANIFEST 

c1ockl.html 
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clock.css 
clock.js 

Agora veja o HTML com o arquivo de manifesto linkado: 

<!DOCTYPE HTML> 

<htm1 manifest=”clock.manifest”> 

<head> 

<title>c1ock</title> 

<script src=”c1 ock. js”x/script> 

<link re1=”sty1esheet” href=”c1ock.css”> 

</head> 

<body> 

<p>The time is: <output id=”clock”x/outputx/p> 
</body> 

</html> 

Note que e recomendado que voce insira o proprio HTML principal na lista 
de URLs do arquivo de manifesto, embora nao seja necessario. Ao encontrar 
uma pagina com um arquivo de manifesto vinculado, o navegador fara cache 
das URLs listadas no manifesto e da propria pagina. 

Note tambem que nao e necessario que todas as URLs para cache estejam 
importadas no documento atual. O arquivo de manifesto pode contar todas as 
paginas de sua aplica<;ao que forem necessarias para permitir o funcionamento 
offline, inclusive a navega^ao entre paginas. 


O objeto ApplicationCache 

O objeto ApplicationCache controla o status e operates de caching da 
pagina. Ele pode ser acessado via javascript, assim: 

window.appiicati oncache 

Seu metodo mais interessante e o update(), que faz com que o agente de 
usuario recarregue o cache da aplica^ao. Alem disso, ele possui a propriedade 
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status, cujo valor numerico pode ser um dos seguintes: 

0 - UNCACHED 

Nao ha um arquivo de manifesto nesta pagina ou apontando para ela 

1 - IDLE 

O objeto ApplicationCache esta ocioso. O cache esta atualizado. 

2 - CHECKING 

O arquivo de manifesto esta sendo baixado e conferido. 

3 - DOWNLOADING 

As URLs vinculadas no manifesto estao sendo baixadas. 

4 - UPDATEREADY 

O cache e antigo, mas ainda nao foi marcado como obsoleto. 

5 - OBSOLETE 

O cache foi marcado como obsoleto e precisa ser atualizado assim que possivel. 

O objeto ApplicationCache tambem possui os seguintes eventos, relacionados 
a sua mudan^a de status: 


onchecking 


— 

onnoupdate 

ondownloading 

onprogress 

onupdateready 

oncached 

onobsolete 



Como voce pode ver, alem de onerror, temos um evento para cada um dos 
status da lista acima. 


CONTROLE DE STATUS DA APLICAQAO 


No exemplo do relogio acima nao ha formularios ou submissoes Ajax. O agente 
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de usuarios nao troca dados com o servidor. Assim e muito facil fazer sua 
aplicapao rodar offline, mas essa nao e a realidade da maioria das aplicapoes. 
Vimos no capitulo anterior como fazer armazenamento local de dados. Com 
isso, voce pode armazenar os dados que o navegador deveria enviar para o 
servidor enquanto a aplicapao estiver offline e, tao logo ela esteja online, enviar 
tudo. 

Para saber se a aplicapao esta online, basta acessar a propriedade onLine do 
objeto window.navigator: 

function sa1va(dados){ 

if(window.navi gator.onLine){ 
enviaAjax(dados) 

}eise{ 

salvaLocal(dados) 

} 

} 

E para disparar o envio quando a aplicapao estiver online e avisar o usuario 
quando ela estiver offline, usamos os eventos ononline e onoffline do objeto 
window: 

window.ononiine=function(){ 
enviaAjax(obtemLocai()) 

document.getEiementByld(‘warning’).innerHTML=’’ 

} 

wi ndow. onoffli ne=f uncti on () { 

document.getEiementByld(‘warning’). 
innerHTML=’Ap1icaqao offline.’ 

} 


SCROLL IN TO VIEW E HIDDEN 


Um truque simples, mas muito util. Voce pode fazer: 
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document.getElementByld(‘aviso’).scrol1intoview() 

Isso vai rolar a pagina ate que o elemento com o id “aviso” esteja visivel no 
topo do viewport. Voce pode passar um parametro opcional top: 

document.getElementByld(‘aviso’). 
scrol1intoviewffaise) 

O valor default e true. Se voce passar false, a rolagem vai deixar o objeto visivel 
na base do viewport. 


HIDDEN 

Ocultar e exibir elementos e uma das tarefas mais comuns em Javascript. Em 
HTML5 existe um atributo especifico para isso, o atributo hidden. Ao inseri- 
lo em um elemento assim: 

<div hidden>xi, se esconde!</div> 

Ou assim: 

<div hidden=”true”>xi, se esconde!</div> 

O elemento estara oculto. 

hidden e Javascript 

Acessar o atributo hidden em Javascript e muito conveniente: 

function switchElement(e1m){ 
if(e1m.hidden) 
elm.hidden=faise 
else 

elm.hidden=true 
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} 

Claro, voce pode fazer: 

function switchElement(elm){ 
elm.hidden=!elm.hidden 

} 


Sugiro que voce sempre use o atributo hidden. Descobrir se o elemento esta 
oculto lendo as propriedades display e visibility do CSS, alem de dar mais 
trabalho, pode gerar confusao. 


GEOLOCATION API 

Metodos de Geolocalizaqao 

Ha tres populares maneiras de um agente de usuario descobrir sua posi^ao 
no globo: 

Geolocaliza<;ao IP 

E o metodo usado pela maioria dos navegadores web em computadores. 
Atraves de consultas whois e servos de localiza<;ao de IP, vai determinar a 
cidade ou regiao em que voce esta. 

Triangulagao GPRS 

Dispositivos conectados a uma rede de celulares e sem um GPS, ou com o 
GPS desligado, podem determinar sua posi^ao pela triangula^ao das antenas 
GPRS proximas. E bem mais preciso que o metodo baseado em IP, vai mostrar 
em que parte do bairro voce esta. 

GPS 

E o metodo mais preciso. Em condi^oes ideais, a margem de erro e de apenas 
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5 metros. 

Embora essas sejam as tres maneiras mais populares de se resolver o 
problema, podem nao ser as unicas. Alguns agentes de usuario podem usar 
uma combina^ao desses metodos, ou mesmo um novo metodo que venha a 
ser inventado. Por isso, a Geolocation API e agnostica em rela(;ao ao metodo 
usado. Ha apenas uma maneira de ligar e desligar o “modo de alta precisao”, o 
que vai ter significado diferente em cada agente de usuario. 

Para obter a posi^ao do usuario, basta executar o script: 

navi gator.geoiocation.getCurrentPosition(showpos) 

Onde showpos e uma fun<;ao callback, que vai receber um objeto de 
posicionamento. Veja um exemplo: 

function showpos(position){ 
iat=position.coords.1atitude 
ion=position.coords.1ongitude 
aiertC'Your position: ‘+1at+’,’+1on) 

} 

Claro, voce pode fazer o que quiser, abrir um mapa, submeter a posi^ao via 
Ajax, enviar os dados para um webservice, etc. 

O metodo getCurrentPosition recebe dois outros parametros. O primeiro e 
uma fun^ao para tratamento de erro. O segundo, um objeto de configura^ao. 

Tratando erros 

O usuario pode escolher se deseja ou nao compartilhar sua posi^ao com 
o site. Alem de o usuario poder dizer nao, muita coisa pode dar errado na 
hora de obter a geolocaliza^ao. Para tratar isso, voce pode passar o segundo 
parametro a getCurrentPosition: 

navi gator.geoiocation.getCurrentPosition(showpos,erropo 
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s) 

Caso algo de errado, a fun^ao erropos vai receber um objeto PositionError, 
que tem o atributo code, que pode ter um dos seguintes valores: 

1 - Permissao negada 

0 usuario clicou em “nao compartilhar”. 

2 - Posifao indisponivel 

O agente de usuario esta desconectado, os satelites de GPS nao puderam ser 
alcan^ados ou algum erro semelhante. 

3 - Timeout 

Tempo esgotado ao obter uma posifao. Voce pode definir o tempo maximo ao 
chamar getCurrentPosition. 

0 - Erro desconhecido 

Alguma outra coisa impediu o agente de usuario de obter uma posifao. 


Nao trate a resposta do usuario como um erro 

Em sua func^ao de tratamento de erro, se obtiver o codigo de erro 1, por 
favor, nao incomode o usuario com mensagens de erro. Ele escolheu nao 
compartilhar sua posifao com o site. Talvez a melhor atitude seja nao fazer 
nada nesse momento. 

O OBJETO DE CONFIGURAQAO 

O terceiro parametro de getCurrentPosition e um objeto de configura<;ao, que 
pode ter as seguintes propriedades: 

enableHighAccuracy 

Se true, liga o modo de alta precisao. Num celular isso pode instruir o 


HTML5 e CSS3 com Farinha e Pimenta 


navegador, por exemplo, a usar o GPS ao inves da triangula^ao GPRS 
timeout 

O tempo em milissegundos que o agente do usuario vai esperar pela posi^ao 
antes de disparar um erro tipo 3. 

maximumAge 

O tempo, em milissegundos, que o navegador pode cachear a posi<;ao. 


watchPosition 

Se o que voce deseja e rastrear a posi^ao do usuario continuamente, pode 
usar, ao inves de getCurrentPosition, o metodo watchPosition. Ele tern a 
mesma assinatura de getCurrentPosition: 

w=navigator.geoiocati on. 
watchPosition(showpos,erropos) 

A diferen^a e que a fun^ao showpos sera chamada toda vez que a posi^ao 
do usuario mudar. O valor de retorno e um numero, que pode ser usado 
posteriormente para cancelar o watcher: 

navi gator.geoiocation.ciearWatch(w) 

UNDO 

O OBJETO UNDOMANAGER 

O agente de usuario deve armazenar um historico de altera$6es para cada 
documento carregado. Esse historico e controlado pelo objeto UndoManager, 
acessivel atraves de window.undoManager. O historico guarda dois tipos 
de altera^oes: 


Altera^oes DOM 
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O proprio historico de alterapoes do navegador, as alterapoes DOM sao inseridas 
automaticamente no historico quando o usuario usa um campo de edipao. 

Objetos undo 

Os objetos undo sao inseridos no historico e controlados pelos seus scripts. Por 
exemplo, uma aplica<;ao de e-mail pode guardar um objeto undo representando 
o fato de que o usuario moveu um e-mail de uma pasta para outra. 

O objeto UndoManager possui os seguintes metodos e propriedades: 


Metodo 

Descripao 

length 

O numero de entradas no historico 

position 

O numero da entrada atual no historico 

add(data,tide) 

Adiciona uma entreada especifica no historico. 

Data pode ser um objeto literal com dados 
arbitrarios. Title e como essa entreda vai aparecer 
descrita na lista do historico 

remove (index) 

Remove uma entrada especifica do historico 

clearUndoO 

Remove todas as entradas antes da atual no historico 

clearRedoQ 

Remove todas as entradas apos a atual no 
historico 


Alem disso, os itens no historico podem ser acessados com window. 
undoManager [index]. 

Respondendo as aqoes de undo e redo 

Cada vez que o usuario disparar uma a$ao de undo ou redo, e o item do 
historico for um objeto undo, sera disparado o evento correspondente, 
window.onundo ou window.onredo. As funpoes associadas a estes eventos 
receberao como parametro um objeto event, contendo uma propriedade data, 
cujo valor e o objeto undo que voce inseriu no historico. 
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Veja o exemplo: 

window.onundo=function(e){ 

a1ert(‘Refazer a alteraqao: ‘+e.data) 

} 


DlSPARANDO AS AQOES DE UNDO E REDO 

Se voce quiser oferecer em sua aplica^ao botoes para undo e redo, basta que 
eles executem: 

document.execCommand(‘undo’) 


Ou: 


document.execCommand(‘redo’) 
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O QUE E CSS? 

O CSS formata a informa<;ao que e entregue pelo HTML. Essa informa^ao 
pode ser qualquer coisa: imagem, texto, video, audio ou qualquer outro 
elemento criado. Grave isso: CSS formata a informa<;ao. Essa formata<;ao 
na maioria das vezes e visual, mas nao necessariamente. No CSS Aural, 
nos manipulamos o audio entregue ao visitante pelo sistema le a tela. Nos 
controlamos volume, profundidade do som, tipo da voz ou em qual caixa 
de som a voz saira. De certa forma voce esta formatando a informa^ao que 
esta em formato de audio e que o visitante esta consumindo ao entrar no 
site. O CSS prepara essa informa^ao para que ela seja consumida da melhor 
maneira possivel. 

Basicamente as atualiza<;6es do HTML5 foram a cria^ao de novas tags, a 
mudan<;a do significado de alguns elementos que foram modificados e outras 
tags que foram descontinuadas. As novidades interessantes ficaram para o 
pessoal que conhece Javascript. As APIs que o HTML5 disponibilizou sao sem 
duvida uma das features mais aguardadas por todos estes desenvolvedores. 
Diferentemente do CSS3 que trouxe mudan<;as drasticas para a manipula<;ao 
e transi<;ao visual dos elementos do HTML. 

Com o CSS que nos conhecemos podemos formatar algumas caracteristicas 
basicas: cores, background, caracteristicas de font, margins, paddings, posi^ao 
e controlamos de uma maneira muito artesanal e simples a estrutura do site 
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com a propriedade float. 

Voce deve pensar: “mas com todas as caracteristicas nos conseguimos fazer 
sites fantasticos, com design atraente e com a manuten<;ao relativamente 
simples”. E eu concordo com voce, mas outras caracteristicas que nos nao 
temos controles e dependemos de: 

1) Algum programa visual como o Photoshop para criarmos detalhes 
de layout; 

2) Javascript para tratarmos comportamentos ou manipularmos 
elementos especificos na estrutura do HTML; 

3) Estrutura e controle dos elementos para melhorarmos acessibilidade 
e diversos aspectos do SEO; 

Com as atualiza^oes do CSS3 e com os browsers atualizando o suporte do 
CSS2.1, nos entramos em um patamar onde sem duvida o CSS e a arma mais 
poderosa para o designer web. Segue uma pequena bsta dos principals pontos 
que podemos controlar agora: 

4) selecionar primeiro e ultimo elemento; 

5) selecionar elementos pares ou impares; 

6) selecionarmos elementos especificos de um determinado grupo de 
elementos; 

7) gradiente em textos e elementos; 

8) bordas arredondadas; 

9) sombras em texto e elementos; 

10) manipula^ao de opacidade; 

11) controle de rota^ao; 

12) controle de perspectiva; 

13) anima^ao; 

14) controle basico de 3D 

15) estrutura^ao independente da posi^ao no codigo HTML; 

Vamos passar basicamente por algumas novidades do CSS e entender 
como essas novidades podem nos ajudar a fazer websites mais dinamicos e 
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interessantes. 

O QUE E UM SELETOR? 

Um seletor representa uma estrutura. Essa estrutura e usada como uma 
condi$ao para determinar quais elementos de um grupo de elementos serao 
formatados. 

Seletores encadeados e seletores agrupados sao a base do CSS. Voce aprende 
naturalmente durante o uso do dia a dia. Para voce lembrar o que sao 
seletores encadeados e agrupados segue um exemplo abaixo: 

Exemplo de seletor encadeado: 

div p strong a { 
color: red; 

} 

Este seletor formata o link (a), que esta dentro de um strong, que esta dentro 
de P e que por sua vez esta dentro de um DIV. 

Exemplo de seletor agrupado: 

strong, em, span { 
color: red; 

} 

Voce agrupa elementos separados por virgula para que herdem a mesma 
formata^ao. 

Estes seletores sao para cobrir suas necessidades basicas de formata<;ao de 
elementos. Eles fazem o simples. O que vai fazer voce trabalhar menos, 
escrever menos codigo CSS e tambem menos codigo Javascript sao os 
seletores complexos. 
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SELETORES COMPLEXOS 


A sintaxe do CSS e simples: 
seletor { 

propriedade: valor; 

} 

A propriedade e a caracteristica que voce deseja modificar no elemento. O 
valor e o valor referente a esta caracteristica. Se voce quer modificar a cor 
do texto, o valor e um Hexadecimal, RGBA ou ate mesmo o nome da cor 
por extenso. Ate aqui, nada muito diferente. Muitas vezes voce nao precisa 
aprender do que se trata a propriedade, basta saber que existe e se quiser 
decorar, decore. Propriedades sao criadas todos os dias e nao e um ato de 
heroismo voce saber todas as propriedades do CSS e seus respectivos valores. 

Os seletores sao a alma do CSS e voce precisa domina-los. E com os seletores 
que voce ira escolher um determinado elemento dentro todos os outros 
elementos do DOM para formata-lo. Boa parte da inteligencia do CSS esta 
em saber a utilizar os seletores de uma maneira eficaz, escalavel e inteligente. 

Os seletores complexos selecionam elementos que talvez voce precisaria fazer 
algum script em Javascript para poder marca-lo com uma CLASS ou um 
ID para entao voce formata-lo. Com os seletores complexos voce consegue 
formatar elementos que antes eram inalcansaveis. 


Exemplo de funcionamento 

Imagine que voce tenha um titulo (hi) seguido de um paragrafo (p). Voce 
precisa selecionar todos os paragrafos que vem depois de um titulo HI. Com 
os seletores complexos voce fara assim: 

hi + p { 
color:red; 
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} 

Esse seletor e um dos mais simples e mais uteis que ja utilizei em projetos 
por ai. Nao precisei adicionar uma classe com JQuery, nao precisei manipular 
o CMS para marcar esse paragrafo, nao precisei fazer nenhum milagre para 
encontrar os paragrafos que vem logo depois de um HI. Apenas apliquei o 
seletor CSS e pronto. 

Abaixo, veja uma lista de seletores complexos e quais as suas fun^oes. Nao 
colocarei todas as possibilidades aqui porque podem haver modifica^oes e 
novos formatos. Para ter uma lista sempre atualizada, siga o link no final da 
tabela: 


padrAo 

SIGNIFICADO 

CSS 

elemento[atr] 

Elemento com um atributo especifico. 

2 

elemento [atr=”x”] 

Elemento que tenha um atributo com 
um valor especifico igual a “x”. 

2 

elemento [atr~=”x”] 

Elemento com um atributo cujo valor e 
uma lista separada por espac^os, sendo 
que um dos valores e “x”. 

2 

elemento [ atr A =”x”] 

Elemento com um atributo cujo valor 
comece exatamente com string “x”. 

3 

elemento [ atr$= ”x” ] 

Elemento com um atributo cujo valor 
termina exatamente com string “x”. 

3 

elemento [atr*=”x”] 

Elemento com um atributo cujo valor 
contenha a string “x”. 

3 

elemento [atr| =”en”] 

Um elemento que tern o atributo especifico 
com o valor que e separado por hifen 
come^ndo com EN (da esquerda para 
direita). 

2 

elemento:root 

Elemento root do documento. 
Normalmente o HTML. 

3 

elemento:nth-child(n) 

Selecione um objeto N de um 
determinado elemento. 

3 


141 













HTML5 e CSS3 com Farinha e Pimenta 


elemento:nth-last- 

child(n) 

Seleciona um objeto N come^ando pelo 
ultimo objeto do elemento. 

3 

elemento:empty 

Seleciona um elemento vazio, sem filhos. 
Incluindo elementos de texto. 

3 

elemento:enabled 



elemento:disabled 

Seleciona um elemento de interface que 
esteja habilitado ou desabilidade, como 
selects, checkbox, radio button etc 

3 

elementoxhecked 

Seleciona elementos que estao checados, 
como radio buttons e checkboxes. 

3 

E > F 

Seleciona os elementos E que sao filhos 
diretos de F. 

2 

E + F 

Seleciona um elemento F que precede 
imediatamente o elemento E. 

2 


Lista atualizada pelo W3C http://www.w3.Org/TR/css3-selectors/#selectors 


PSEUDO-CLASSES E 
PSEUDO-ELEMENTOS 

Ha uma diferen<;a muito senslvel entre pseudo-classes e pseudo-elementos. 
Ambos ajudam o desenvolvedor a encontrar e separar elementos especlficos 
na arvore de objetos do documento HTML. Normalmente temos algumas 
necessidades ao selecionar determinados elementos que nao tem identifica^ao 
de class ou id no codigo. A situa^ao se agrava quando nao podemos modificar 
o HTML ou quando o codigo e gerado dinamicamente. 

Para entender a diferen^a e simples: lembre-se que a pseudo-classe e como 
se voce inserisse uma classe dinamica no elemento. E os pseudo-elementos 
e como se voce inserisse um elemento em uma determinada posi^ao no 
documento. 
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Exemplo de pseudo-classe: imagine voce queira formatar o LINK quando o 
usuario passar o mouse sobre ele. Voce pode manipula-lo pela pseudo-classe 
:hover. E como se o browser colocasse no elemento uma classe no momento 
que o usuario passasse o mouse no elemento e voce pode formatar essa classe 
pelo CSS. 

Exemplo de pseudo-elemento: imagine que voce queira formatar a primeira 
letra do paragrafo. Voce teria que envolver a primeira letra da primeira palavra 
do paragrafo com algum elemento - o SPAN serviria - inserir uma classe neste 
elemento e entao formata-lo como o desejado. Sem contar que voce teria que 
fazer um script - provavelmente em JQuery - para encontrar a primeira letra 
para poder inserir este elemento. 

Com a utiliza^ao do pseudo-elemento -first-letter o browser ja encontra este 
elemento para voce, possibilitando a formata^ao. 

Nota: Antigamente, os pseudo-elementos eram escritos como as pseudo¬ 
classes, iniciando-os com dois pontos (:). Mas isso causava muita confusao 
entre os desenvolvedores para distinguir pseudo-elementos de pseudo¬ 
classes, por este motivo a especifica^ao foi modificada, fazendo com que os 
pseudo-elementos sejam escritos iniciando com um par de dois pontos (::), 
assim os desenvolvedores conseguem diferenciar um pseudo-elemento de 
uma pseudo-classe. 


Pseudo-classes 

As pseudo-classes manipulam um determinado estado do elemento. Todos 
os elementos tern estados adicionais alem daquele que voce consegue ver. 
Por exemplo: ao passar o mouse, ao clicar, quando ganha foco e etc. Estes 
estados podem ser formatados para trazer melhor experiencia para o usuario. 
A formata<;ao destes estados ganha muita importancia em mobiles e tablets, ja 
que a intera<;ao normalmente e feita com os dedos, fazendo com que o usuario 
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tenha um feedback sensitivo maior. 

Lembrando que a especifica^ao das pseudo-classes vem da versao 2.1 do CSS. 
Contudo com as atualiza(;ao dos browsers juntamente com a moda do CSS3, 
essas pseudo-classes e tambem grande parte dos pseudo-elementos foram 
implementados e estao prontos para usar. 

Uma lista das pseudo-classes completa, juntamente com usa explica(;ao mais 
abrangente e detalista pode ser encontrada na propria especifica^ao do W3C. 

As pseudo-classes sao divididas em 2 tipos: estruturais e dinamicas. 


Pseudo-classes dinamicas 

As pseudo-classes dinamicas controlam os estados dos elementos. Todos os 
elementos tern estados definidos. E facil de entender quando lembramos do 
elemento A (link). Ele tern varios estados: quando voce passa o mouse, quando 
voce tira o mouse, quando voce clica e quando e visitado. Estes estados o 
LINK podem ser formatados. Por isso que voce modifica a cor ou coloca 
sublinhado quando o usuario passa o mouse por cima do link. Estes estados 
tambem estao presentes em outros elementos. Claro, um DIV por exemplo, 
nao tera a pseudo-classe de VISITED, ja que voce nao visita um DIV. 


Pseudo-Classe 

Descrhpao de uso 

:hover 

Quando o mouse passa por cima do objeto 

:visited 

Quando o elemento foi visitado. Normalmente aplicado 
para link. 

:active 

Quando o elemento esta sendo ativo. Para ver esse 
estado, clique em um link, mas nao solte o botao. 


4 Especifica^ao W3C sobre Pseudo-Classes: http://www.w3.org/TR/css3- 
selectors/#pseudo-classes 
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:focus 


Quando o elemento ganha foco. Por exemplo quando os 
inputs ganham foco para serem preenchidos. 


Pseudo-classes estruturais 

As pseudo-classes estruturais encontram elementos em uma arvore de 
elementos. Eles nao formatam os estados, mas nos ajudam a encontrar 
elementos especificos para que sejam formatados sem a ajuda de programa^ao 
ou inser^ao de alguma identifica<;ao direta no codigo. 

Lembra-se do tempo que para criarmos uma tabela zebrada (aquela tabela que 
tern as cores de linhas alternadas) precisavamos fazer um loop em Javascript 
ou alguma linguagem server-side para contar as linhas e descobrir qual era 
impar e par, para entao inserirmos uma classe nas linhas determinadas e so 
depois podermos formata-las com CSS para que a tabela ficasse da forma 
desejada. Muito trabalho para ter um resultado infimo. Hoje podemos 
encontrar estes elementos facilmente utilizando a pseudo-dasse :nth-child(). 
Simples assim: 

table tr:nth-child(odd) {background: gray;} 

O seletor acima encontra todos as TR (linhas) impares dentro da tabela e 
aphca um background cinza. Simples, nao e? Entao lembre-se: pseudo-classes 
selecionam elementos especificos na arvore de elementos do HTML. 


Pseudo-classes do CSS3 

O CSS 3 trouxe uma serie de pseudo-classes, que expandem o poder do 
desenvolvedor ao escolher e formatar um determinado elemento que nao 
tenha uma identifica^ao definida direto no codigo. Abaixo segue uma lista de 
pseudo-classes que o CSS3 adicionou a cartilha: 


W 
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Pseudo-classe 

Descri<;ao 

: target 

Encontra um elemento alvo. Muito utilizado para 
fazer abas. 

:root 

Encontra o elemento que e o elemento raiz do 
documento. 

:empty 

Encontra elementos que nao tern filhos. 

: enabled 

Encontra elementos que estao habilitados. Por 
exemplo, inputs de checkbox, texto e etc. 

: disabled 

Encontra elementos desabilitados para edfipao ou 
manipula^ao. 

:checked 

Encontra elementos como checkbox e botoes 
radio que estao checados. 

:first-of-type 

Encontra um elemento especifico que seja o 
primeiro filho de um definido. 

:last-of-type 

Encontra um elemento especifico que seja o 
ultimo filho de um elemento definido. 

:nth-child() 

Encontra um elemento tomando como base sua 
posi<;ao na arvore de elementos do mesmo genero. 

:nth-last-child() 

Encontra o ultimo elemento tomando como base sua 
posi<;ao na arvore de elementos do mesmo genero. 

:nth-of-type() 

Encontra os elementos do mesmo tipo elemento 
tomando como base sua posi$ao na arvore de 
elementos do pai. 

:last-child 

Encontra o ultimo elemento. 

:first-child 

Encontra o primeiro elemento. 

:only-of-type 

Seleciona os elementos de um mesmo tipo que sao 
os filhos. 

:only-child 

Encontra os elementos filhos do mesmo genero de 
um determinado pai. 
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Seleciona os elementos definidos, MENOS os 
elementos especificados pela pseudo-classe. 

PSEUDO-ELEMENTOS 

Pseudo-elementos permitem que os autores selecionem informa^oes 
inacesslveis e possibilitem os desenvolvedores um caminho para referenciar 
conteudos que nao existem. Por exemplo: podemos inserir um elemento antes 
(-before) ou depois (-after) de um objeto ja existente no HTML. 

Existem alguns pseudo-elementos basicos que voce ja deve ter usado algumas 
vezes em seus projetos: 


Pseudo-elemento 

Descri^ao 

-first-letter 

Encontra a primeira letra de da primeira palavra 

de um determinado bloco de texto. 

-first-line 

Seleciona a primeira linha de um bloco de texto. 

-before 

Insere um elemento no inicio do conteudo de 

um elemento. 

-after 

Insere um elemento no final do conteudo de 

um elemento. 


Para entendermos melhor como os pseudo-elementos trabalham, vamos 
tomar como exemplo o pseudo-elemento -first-letter. Veja o codigo abaixo: 

p: :first-1etter {font-size:20px; font-weight: bold; } 

O codigo acima define que a primeira letra do paragrafo ficara com o tamanho 
de 20px e em negrito. 

Para entender melhor como o browser trabalha: imagina que o browser, ao 
encontrar a primeira letra, ele a insere em um elemento SPAN com a classe 
FIRST-LETTER. Como no codigo abaixo: 


m 
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<P> 

<span c1ass=”first-letter”>v</span>eja, mas nao 

toque. 

</p> 

Obviamente este e um exemplo. O browser nao insere nenhum elemento no 
seu codigo. Mas e como se fizesse isso. Imagine este mesmo exemplo quando 
ler sobre os outros pseudo-elementos. 

Infelizmente os pseudo-elementos nao sofreram tantas modifica^oes e 
inser<;6es de novas features com a vinda do CSS3. 


GRADIENTE 

Todos os browsers mais novos como Safari, Opera, Firefox e Chrome ja 
aceitam essa propriedade e voce pode utiliza-la hoje. Infelizmente, mas voce 
ja sabia, os IEs atuais (8 e 9) nao reconhecem ainda. Mesmo assim, ate o dia 
que este capitulo estava sendo escrito, o suporte dos browsers ainda estava 
muito nebuloso. Como voce vera abaixo, os codigos que cada browser suporta 
ainda eram diferentes e nao seguiam um padrao. Bern como nao havia padrao 
especifico para criar gradientes no estilo radial. 

Voce pode perguntar: “Mas ja que terei o trabalho de produzir a imagem 
do gradiente para browsers antigos, porque nao utilizar imagens para todos 
os browsers?" Lembre-se que se utilizar uma imagem, o browser fara uma 
requisi^ao no servidor buscando essa imagem. Sem imagem, teremos uma 
requisi^ao a menos, logo o site fica um pouquinho mais rapido. Multiplique 
isso para todas as imagens de gradiente que voce fizer e tudo realmente fara 
mais sentido. Deixe para que os browsers nao adeptos baixem imagens e 
fa$am mais requisites. 

Veja abaixo um exemplo de codigo, juntamente com o fallback de imagem 
caso o browser nao suporte ainda essa especifica^ao: 
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div { 

width:200px; 
height:200px; 
background-color: #FFF; 

/* imagem caso o browser nao aceite a feature */ 
background-image: url(images/gradiente.png); 

/* Firefox 3.6+ */ 

background-image: -moz-1inear-gradient(green, 

red) ; 

/* Safari 5.1+, chrome 10+ */ 

background-image: -webkit-1inear-gradient(green, 

red) ; 

/* Opera 11.10+ */ 

background-image: -o-linear-gradient(green, 

red) ; 

} 

Aten^ao: Ate que os browsers implementem de vez essa feature, iremos utilizar 
seus prefixos. Como ficou: 



“Stops” ou definindo o tamanho do seu gradiente 

O padrao e que o gradiente ocupe 100% do elemento como vimos no exemplo 
anterior, mas muitas vezes queremos fazer apenas um detalhe. 


Nesse caso nos temos que definir um STOP, para que o browser saiba onde 
uma cor deve terminar para come^ar a outra. Perceba o 20% ao lado da cor 
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vermelha. O browser calcula quanto e 20% da altura (ou largura dependendo 
do caso) do elemento, e come^a o gradiente da cor exatamente ali. O codigo 
de exemplo segue abaixo: 

/* Firefox 3.6+ */ 

background-image: -moz-1inear-gradient(green, 
red 20%); 

/* Safari 5.1+, chrome 10+ */ 
background-image: -webkit-1inear-gradient(green, 
red 20%); 

/* Opera 11.10+ */ 

background-image: -o-1inear-gradient(green, red 

20 %); 


Veja o resultado: 


Se colocarmos um valor para o verde, nos iremos conseguir efeitos que 
antes so conseguiriamos no Illustrator ou no Photoshop. Segue o codigo e o 
resultado logo apos: 

/* Firefox 3.6+ */ 

background-image: -moz-1inear-gradient(green 
10%, red 20%); 

/* Safari 5.1+, chrome 10+ */ 

background-image: -webkit-1inear-gradient(green 
10%, red 20%); 

/* Opera 11.10+ */ 

background-image: -o-1inear-gradient(green 10%, 
red 20%); 
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Perceba que o tamanho da transi^ao vai ficando menor a medida que vamos 
aumentando as porcentagens. Muito, mas muito util. 


PROPRIEDADE BORDER-IMAGE 

Definir imagem para as bordas e uma daquelas propriedades da CSS que 
voce se pergunta como viviamos antes de conhece-la. E muito mais facil 
entender testando na pratica, por isso sugiro que se voce estiver perto de um 
computador, fa<;a testes enquanto le este texto. A explica^ao pode nao ser 
suficiente em algumas partes, mas a pratica ira ajuda-lo a entender. 

Esta propriedade ainda esta em fase de testes pelos browsers, por isso 
utilizaremos os prefixos para ver os resultados.Utilizarei apenas o prefixo do 
Safari, mas o Firefox ja entende essa propriedade muito bem. 

A sintaxe do border-image se divide em tres partes: 1) URL da imagem que 
sera utilizada. 2) Tamanho do slice das bordas. 3) Como o browser ira aplicar 
a imagem na borda. 

Segue um exemplo da sintaxe abaixo: 

a { 

display:block; 
width:100px; 
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-webkit-border-image: url(border.gif) 10 10 10 10 
stretch; 

} 

Acima definimos uma imagem com o nome de border.gif, logo depois 
definimos o width de cada uma das bordas do elemento. A sintaxe e igual 
a outras propriedades com 4 valores: top, right, bottom, left. E logo depois 
colocamos qual o tipo de tratamento que a imagem vai receber. 


Dividindo a imagem 

Para posicionar a imagem devidamente em seu objeto o browser divide 
imagem em 9 se^oes: 



Quando a imagem e colocada no elemento, o browser posiciona os cantos da 
imagem juntamente com os cantos correspondentes do elemento. Ou seja, 
o bloco 1 da imagem e colocado no canto superior esquerdo, o 3 no canto 
superior direito e assim por diante. Se voce fizer o teste, a imagem aparecera 
no elemento como se estivesse desproporcional. Isso e normal porque a 
imagem deve seguir as proposes do elemento e nao as suas proprias. 


COMPORTAMENTO DA IMAGEM 
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O comportamento da imagem e a parte mais importante porque define como 
o centra da imagem (no caso do nosso exemplo a se^ao de numero 5), ira ser 
tratada. Ha varios valores, mas o que e mais simples de se entender e a stretch, 
que estica e escala a imagem para o tamanho do elemento aplicado. Ha outros 
valores como round e repeat. Mas hoje alguns browsers nao tem tanto suporte 
e acabam ignorando esses valores ou como no caso do Safari e o Chrome, 
interpretam o round como o repeat. Vamos nos concentrar com o stretch e 
voce entendera como funciona a propriedade. 


Aplicaqao 

Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer 
um botao ao estilo iPhone. A coisa e simples e sugiro que voce fa^a testes 
individualmente brincando com os valores das bordas e com diversas outras 
imagens para ver como funciona o recurso. 



Irei aplicar o estilo em um link. O codigo segue abaixo: 
a { 

display:block; 
width:100px; 
text-align:center; 
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font:boid 13px verdana, arial, tahoma, 
sans-serif; 

text-decoration:none; 
color:black; 

} 

Para inserir a imagem, colocamos as duas linhas abaixo: 
border-width:lOpx; 

-webkit-border-image: uri(button.png) 10 stretch; 

Defini na primeira linha que a borda teria lOpx de largura com a propriedade 
border-width. Na segunda linha define que a imagem utilizada seria a button, 
png, que as areas da imagem teriam que se estender por lOpx, e o valor stretch 
define que a imagem cobrira o elemento inteiro. 

Temos o border-width definindo a largura da borda, mas nao temos nenhum 
valor dizendo quanto dessa largura a imagem deve tomar. 

Os efeitos sao bem estranhos quando esses valores estao mal formatados. 
Por isso, teste na pratica essa propriedade para que nao haja problemas a 
implementar em seus projetos. O pulo da gato, para mim, e a propriedade 
border-width. 


SOMBRAS 

Nao tem segredo: A propriedade box-shadow produz drop shadow em um 
elemento e a propriedade text-shadow produz drop shadow diretamente nas 
letras do texto. A sintaxe das duas propriedades sao identicas. Veja abaixo: 

div { 

text-shadow:5px lOpx 7px #000; 
box-shadow:5px lOpx 7px #000; 

} 


■§ 
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A sintaxe e divida em 3 partes. Os dois primeiros numeros sao as coordenadas: 
significa que a sombra sera deslocada 5px pra esquerda e lOpx do topo. 

O terceiro numero e aplicado pra produzir o blur da sombra. Isso quer dizer 
que a sombra sera esmaecida e ficara “dilulda” em 7px. 

O ultimo valor e referente a cor. Voce pode utilizar RGBA em vez de 
Hexadecimal. Alias, o valor em RGBA pode ser usado em qualquer 
propriedade que dependa de cores. 

Essa especifica<;ao ainda esta iniciando, mas ja funciona em alguns browsers 
sem a ajuda de prefixos, como no Safari. Mesmo assim, ainda sinto falta de 
algumas possibilidades, como por exemplo produzir apenas sombras em um 
dos lados do elemento. Atualmente a sombra e produzida em todos os lados, 
tornando dificil o controle do lado em que a sombra sera aplicada. Entretanto 
a aplica^ao destas propriedades ja salvam muito tempo na cria^ao do layout. 

Essas propriedades serao ignoradas em browsers que nao as suportam. Logo, 
voce tern uma decisao muito dificil: ou faz uma versao utilizando imagens 
PNGs para simular o efeito de sombra, ou, que e a op(;ao que eu prefiro, nao 
mostre sombras para os browsers que nao suporta as propriedades. Voce tem 
menos trabalho, mas havera alguma diferen<;a de visual nos browsers antigos. 

As vezes, colocando uma borda no lugar da sombra ja resolve o problema 
do visual e nao temos o trabalho de criar um PNG somente para isso. Com 
a ajuda da biblioteca Modernizr fica facil saber qual browser nao aceita essas 
propriedades. 


RGBA 


Normalmente em web trabalhamos com cores na forma de hexadecimal. E a 
forma mais comum e mais utilizada desde os primordios do desenvolvimento 
web. Mesmo assim, ha outros formatos menos comuns que funcionam sem 
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problemas, um destes formatos e o RGB. O RGB sao 3 conjuntos de numeros 
que come^am no 0 e vao ate 255 (0% ate 100%), onde o primeiro bloco define 
a quantidade de vermelho (Red), o segundo bloco a quantidade de verde 
(Green) e o ultimo bloco a quantidade de azul (Blue). A combina<;ao destes 
numeros formam todas as cores que voce pode imaginar. 

No HTML o RGB pode ser usado em qualquer propriedade que tenha a 
necessidade de cor, como: color, background, border etc. Exemplo: 

P { 

background:rgb(255,255,0); 
padding:10px; 
font:13px verdana; 

} 

Este codigo RGB define que o background o elemento P sera amarelo. 


RGBA E A DIFEREN^A DA PROPRIEDADE OPACITY 

O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos 
via propriedade opacity. Lembrando que quando modificamos a opacidade 
do elemento, tudo o que esta contido nele tambem fica opaco e nao apenas o 
background ou a cor dele. Veja o exemplo abaixo e compare as imagens: 

A primeira e a imagem normal, sem a aplica^ao de opacidade: 
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Agora com o bloco branco, marcado com um P, com opacidade definida. 
Perceba que o background e tambem a cor do texto ficaram transparentes. 

Isso e util mas dificulta muito quando queremos que apenas a cor de fundo 
de um determinado elemento tenha a opacidade modificada. E ai que entra 
o RGBA. O RGBA funciona da mesma forma que o RGB, so que no caso do 
RGBA, alem dos 3 canais RGB (Red, Green e Blue) ha um quarto canal, A 
(Alpha) que controla a opacidade da cor. Nesse caso, podemos controlar a 
opacidade da cor do background sem afetar a opacidade dos outros elementos: 

O funcionamento e assim: 



Veja um exemplo aplicado abaixo: 



P { 
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background:rgba(255,255,0, 0.5); 
padding:10px; 
font:13px verdana; 

} 

O ultimo valor e referente ao canal Alpha, onde 1 e totalmente visivel e 0 e 
totalmente invisivel. No exemplo acima esta com uma opacidade de 50%. 

Diferengas entre RGB e HSL 

A manipula<;ao de cores no HTML nunca foi muito flexivel. No comedo 
escolhiamos as cores escrevendo seus nomes por extenso como: black, blue, 
yellow, green, olive, maroon, fuchsia, red, white, silver, navy, teal, purple, lime, 
gray, aqua. Na decada de 80 houve um acrescimo de 131 novas cores com 
nomes estranhos chamada XI15. Estes nomes foram adotados pelos primeiros 
browsers tem sido suportados ate hoje. Ha nomes como mintcream, moccasin, 
navajowhite, powderblue, springgreen entre outros... O W3C ainda mantem 
uma lista completa dos nomes dessas cores. 

Alem de ser muito dificil de manter uma cole^ao de cores com seus nomes 
esquisitos, e quase impossivel de criar um website tentando se adequar a 
quantidade limitada de cores disponiveis. Ja tinhamos problemas suficientes 
com a quantidade bmitada de fonts, imagine o trabalho que teriamos se os 
layouts fossem feitos apenas com um punhado e cores. Com esse problemas 
varios padroes matematicos foram estabelecidos para a cria^ao de qualquer 
cor. Existem dois padroes conhecidos chamados de RGB e HSL. 

O formato RGB esta ficando mais popular com o CSS3 por que agora podemos 
controlar o canal alpha utilizando o formato RGBA. Ha tambem outro formato 
que ganhou alguma aten^ao do workgroup no W3C que e o formato de cor 
chamado HSL. Como o RGB, o HSL tambem ganhou um canal de opacidade, 
ficando HSLA. Muitos desenvolvedores ainda tem duvidas sobre as diferen<;as 
entre RGBA e HSLA e qual utilizar. 

5 http://en.wikipedia.org/wiki/Xl l_color_names 

6 http://www.w3.Org/TR/SVG/types.html#ColorKeywords 
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Tudo e muito simples de entender. RGB e HSL sao dois formatos de 
composi^ao de cores digitais. Voce pode escolher qual dos dois utilizar, vai 
do seu gosto. Contudo como ate hoje utilizamos o HEXADECIMAL como 
padrao de cores para web, minha sugestao e esperar para ver qual das duas 
especifica^oes caira no gosto do mercado para escolher um dos formatos 
para utiliza-la mais frenquentemente nos projetos. Ao que parece o RGB esta 
ficando mais popular. 

Entretanto os dois formatos tern flexibilidades diferentes e por isso pode ser 
muito dificil apenas uma delas se tornar mais popular que outra. 


O RGB 

O processo e simples: como na vida real onde voce mistura cores para 
obter uma outra cor como resultado, voce faz a mesma coisa com o RGB: 
voce mistura as cores para obter uma outra cor como resultado. Para isso 
utilizaremos a soma de 3 valores: Red, Green e Blue: rgba(red, green, blue); 

Veja a sintaxe abaixo para entender melhor a aplica<;ao: 

P { 

color: rgb(100%, 100%, 0%); 

} 

Os tres valores sao ligados as tres principals respectivamente vermelha, verde 
e azul. No caso acima inseri 100% de cor para Vermelho e Verde. Como bom 
aluno de educa^ao artistica, voce deve saber que misturando vermelho e 
verde a cor resultante sera amarelo. 

Voce pode ser mais especifico controlando ate mesmo a fra^ao da porcentagem, 
por exemplo: 

P { 
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color: rgb(55.2%, 100%, 0%); 

} 

Assim voce consegue exatamente a cor que precisa. Esse formato de 
porcentagem e controle de fra^ao tambem e aplicado ao HSL. 

O RGB pode ser configurado utilizando valores hexadecimais. A conta nao e 
simples e voce precisa ser um pouco nerd para entender. A explica^ao e meio 
longa. Sugiro que voce leia no Wikipedia algo mais detalista. 


O HSL 

O HSL funciona um pouco diferente. A sintaxe e como abaixo: 

P { 

color: hslCO, 100%, 30%); 

} 

A escolha de cores no HSL nao e baseado na mistura mas sim em um 
esquema baseado em um cilindro. O primeiro numero de valor na sintaxe 
e onde escolhemos a cor. Come^amos no topo com vermelho, onde o valor 
e 0, e damos uma volta de 360 graus, retornando novamente no topo, na cor 
vermelha. Conforme aumentamos o valor vamos selecionando as cores. Por 
exemplo, se selecionarmos um valor por volta de 120 obtemos um verde. 

Veja a proxima imagem para entender melhor: 


7 http://en.wikipedia.org/wiki/RGB_color_model 


css 



Embora possamos escolher qualquer cor misturando as cores com o RGB, 
e muito mais instintivo escolhermos uma cor espedfica e modificarmos sua 
luminosidade. Escolhemos o azul e modificamos sua luminosidade para 
obtermos o tom que voce deseja. 

Para escolhermos a luminosidade e a satura^ao da cor modificamos os 
dois outros valores, o segundo valor e a luminosidade e o terceiro valor e 
a satura<;ao ou a quantidade de cinza que voce colocara na cor. Modificar a 
saturacjao e como se voce mudasse a quantidade de cor. Quanto menos cor, 
mais cinza. Se voce quiser uma cor mais suja, mais apagada, voce diminui 
este valor. Caso contrario voce a mantem como 100% e utiliza a quantidade 
integral da cor. Normalmente esse sera o padrao. 

E O HEXADECIMAL? 

O hexadecimal, queridinho dos nossos cora^oes, sempre estara ao nosso lado. 
A sintaxe e muito mais curta que as outras duas especifica^oes mas nao temos 
todas as vantagens que as outras especifica^oes nos dao, come^ando pelo 
canal alpha. Com a grande maioria dos programas visuais dando suporte ao 
formato hexadecimal ele ainda perdurara durante muito tempo. 
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CURRENTCOLOR 


O valor currentColor e muito simples de se entender e pode ser muito util 
para diminuirmos o retrabalho em alguns momentos da produ^ao. Imagine 
que o currentColor e uma variavel cujo seu valor e definido pelo valor da 
propriedade color do seletor. Veja o codigo abaixo: 

P { 

background:red; 
padding:10px; 
font:13px verdana; 
color: green; 
border:lpx solid green; 

} 


Note que o valor da propriedade color e igual ao valor da cor da propriedade 
border. 


Ha uma redundancia de codigo, que nesse caso e irrelevante, mas quando 
falamos de dezenas de arquivos de CSS modulados, com centenas de linhas 
cada, essa redundancia pode incomodar a produtividade. A fun^ao do 
currentColor e simples: ele copia para outras propriedades do mesmo seletor 
o valor da propriedade color. Veja o codigo abaixo para entender melhor: 

P { 

background:red; 
padding:10px; 
font:13px verdana; 
color: green; 

border:lpx solid currentColor; 

} 

Veja que apliquei o valor currentColor onde deveria estar o valor de cor da 
propriedade border. Agora, toda vez que o valor da propriedade color for 
modificado, o currentColor aplicara o mesmo valor para a propriedade onde 
ela esta sendo aplicada. 


css 


Isso funciona em qualquer propriedade que fa$a utiliza^ao de cor como 
background, border, etc. Obviamente nao funciona para a propriedade color. 
O currentColor tambem nao funciona em seletores separados, ou seja, voce 
nao consegue atrelar o valor da propriedade color ao currentColor de outro 
seletor. 


@FONT-FACE 


A regra @font-face e utilizada para que voce utilize fonts fora do padrao do 
sistema em seus sites. Para que isso funcione nos disponibilizamos as fonts 
necessarias em seu servidor e linkamos estas fonts no arquivo CSS. A sintaxe 
e bem simples e tern suporte a todos os navegadores, com algumas ressalvas. 

©font-face { 

font-family: helveticaneue; 
s rc: u rl(helveticaNeueLTStd-UltLt.otf); 

} 

Na primeira linha voce customiza o nome da font que voce usara durante 
todo o projeto. Na segunda linha definimos a URL onde o browser procurara 
o arquivo da font para baixar e aplicar no site. Voce aplica a fonte como abaixo: 

p {font:36px helveticaneue, Aria!, Tahoma, 
Sans-serif;} 

Suponha que o usuario tenha a font instalada, logo ele nao precisa baixar 
a font, assim podemos indicar para que o browser possa utilizar o arquivo 
da propria maquina do usuario. Menos requisites, mais velocidade. Veja o 
codigo abaixo: 

©font-face { 

font-family: helveticaneue; 
src: local(HelveticaNeueLTStd-UltLt.otf), 
url(HelveticaNeueLTStd-UltLt.otf); 

} 
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Abaixo segue uma serie de formatos que podem ser usados e que os browsers 
podem adotar: 


String 

Font Format 

Common 

Extensions 

truetype 

TrueType 

.ttf 

opentype 

OpenType 

.ttf, .otf 

truetype-aat 

TrueType with Apple 
Advanced Typography 
extensions 

.ttf 

embedded-opentype 

Embedded OpenType 

.eot 

woff 

WOFF (Web Open Font 
Format) 

.woff 

svg 

SVG Font 

.svg, .svgz 


Compatibilidade 

As versoes 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a 
font for EOT. Voce pode encontrar qualquer conversor online e esse problema 
e resolvido. Voce pode converter suas fonts para EOT diretamente no Font 
Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF. 


Para suprir a necessidade de aten^ao do Internet Explorer, voce precisa 
especificar a URL da font .eot para que o Internet Explorer possa aplicar a 
font corretamente. A sintaxe fica desta forma: 

©font-face { 

font-family: helveticaneue; 

src: url(helveticaNeueLTStd-UltLt.eot); 

src: url (helveticaNeueLTStd-UltLt.otf); 


} 
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Criando um pacote Font-Face 

O Font Squirrel fez um pequeno favor para toda a comunidade. E um 
sisteminha que converte suas fonts para os formatos necessarios e te devolve 
para voce utilizar em seus sites: http://migre.me/4qST9 


MULTIPLOS BACKGROUNDS 


Quem nunca teve que criar um background onde havia um gradiente em 
cima, embaixo e dos lados? Voce sabe que para criar algo parecido voce nao 
pode utilizar uma imagem so. A solu^ao ate hoje seria criar 4 elementos 
divs aninhados (ou seja, um dentro do outro) e aplicar um peda^o deste 
background em cada destes elementos para dar a sensa^ao de um background 
unico. O resultado e interessante mas o meio que isso e feito nao e nada bonito. 
Voce era obrigado a declarar 4 elementos “inuteis“ no seu HTML apenas 
para compensar um efeito visual. A possibilidade de atribuirmos multiplos 
backgrounds em apenas um elemento e a feature que vai ajuda-lo a nao sujar 
seu codigo. 

A sintaxe para multiplos backgrounds e praticamente identica a sintaxe para 
definir um background. Segue abaixo um exemplo: 

div { 

width:600px; 
height:500px; 
background: 

url(imgl.png) top left repeat-X, 
url(img2.png) bottom left repeat-Y; 

} 

Definimos apenas uma propriedade background, o valor dessa propriedade 
em vez de conter apenas um valor como normalmente fazemos, podera haver 
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varios, com suas respectivas defini^oes de posi^ao, repeat e attachment (fixed). 


COLUMNS 

Com a propriedade columns definimos colunas de texto de forma automatica. 
Ate hoje nao havia maneira de fazer isso de maneira inteligente com CSS 
e o grupo de propriedades columns pode fazer isso de maneira livre de 
gambiarras. 


COLUMN-COUNT 

A propriedade column-count define a quantidade de colunas tera o bloco de 
textos. 


/* Define a quantidade de colunas, a largura e 
definida uniformimente. */ 

-moz-column-count: 2; 

-webkit-column-count: 2; 


COLUMN-WIDTH 

Com a propriedade column-width definimos a largura destas colunas. 

-moz-column-width: 400px; 

-webkit-column-width: 400px; 

Fiz alguns testes aqui e ha uma diferen^a entre o Firefox 3.5 e o Safari 4 (Public 
Beta). 

O column-width define a largura minima das colunas. Na documenta^ao 
do W3C e a seguinte: imagine que voce tenha uma area disponivel para as 
colunas de lOOpx. Ou seja, voce tem um div com lOOpx de largura (width). 
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E voce define que as larguras destas colunas (column-width) sejam de 45px. 
Logo, havera lOpx de sobra, e as colunas irao automaticamente ter 50px de 
largura, preenchendo este espa^o disponivel. E esse o comportamento que o 
Firefox adota. 

Ja no Safari acontece o seguinte: se voce define um column-width, as colunas 
obedecem esse valor e nao preenchem o espa$o disponivel, como acontece 
na explicac^ao do W3C e como acontece tambem no Firefox. Dessa forma faz 
mais sentido para mim. 

Como a propriedade nao esta 100% aprovada ainda, ha tempo para que isso 
seja modificado novamente. Talvez a mudan^a da nomenclatura da classe 
para column-min-width ou algo parecida venha a calhar, assim, ficamos com 
os dois resultados citados, que sao bem uteis para nos de qualquer maneira. 


COLUMN-GAP 


A propriedade column-gap cria um espa^o entre as colunas, um gap. 

/* Define o espago entre as colunas. */ 
-moz-coJumn-gap: 50px; 

-webkit-column-gap: 50px; 


Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades nao 
funcionam oficialmente em nenhum browser. Mas ja podem ser usados em 
browsers como Firefox e Safari. 


TRANSFORM 2D 

A propriedade transform manipula a forma com que o elemento aparecera 
na tela. Voce podera manipular sua perspectiva, escala e angulos. Uma 
transforma^ao e especificada utilizando a propriedade transform. Os browsers 
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que suportam essa propriedade, a suportam com o prefixo especificado. Os 
valores possiveis ate agora estao abaixo: 

scale 

O valor scale modificara a dimensao do elemento. Ele aumentara 
proporcionalmente o tamanho do elemento levando em considera$ao o 
tamanho original do elemento. 

skew 

Skew modificara os angulos dos elementos. Voce pode modificar os angulos 
individualmente dos eixos X e Y como no codigo abaixo: 

-webkit-transform: skewY(30deg); 
-webkit-transform: skewx(30deg); 

translation 

O translation movera o elemento no eixo X e Y. O interessante e que voce 
nao precisa se preocupar com floats, positions, margins e etc. Se voce aplica o 
translation, ele movera o objeto e pronto. 

rotate 

O rotate rotaciona o elemento levando em consideraqao seu angulo, 
especialmente quando o angulo e personalisado com o transform-origin. 


CSS Transform na pratica 


Veja o codigo abaixo e seu respectivo resultado: 
img { 

-webkit-transform: skew(30deg); /* para webkit 

*/ 

-moz-transform: skew(30deg); /* para gecko */ 
-o-transform: skew(30deg); /* para opera */ 
transform: skew(30deg); /* para browsers sem 


prefixo */ 

} 


O codigo acima determina que o angulo da imagem sera de 30deg. Colocamos 
um exemplo para cada prefixo de browser. Ficando assim: 



Varias transformagoes em um unico elemento 

Para utilizarmos varios valores ao mesmo tempo em um mesmo elemento, 
basta definir varios valores separando-os com espa^os em uma mesma 
propriedade transform: 


img { 

/* para webkit */ 

-webkit-transform: scaie(1.5) skew(30deg); 
/* para gecko */ 

-moz-transform: scale(1.5) skew(30deg); 


HTML5 e CSS3 com Farinha e Pimenta 


/* para opera */ 

-o-transform: sca1e(1.5) skew(30deg); 

/* para browsers sem prefixo */ 
transform: sca1e(1.5) skew(30deg); } 

transform-origin 

A propriedade transform-origin define qual o ponto do elemento a 
transforma<;ao tera origem. A sintaxe e identica ao background-position. 
Observe o codigo abaixo: 

img { 

-webkit-transform-origin: lOpx lOpx; /* para 
webkit */ 

-moz-transform-origin: lOpx lOpx; /* para webkit 

V 

-o-transform-origin: lOpx lOpx; /* para webkit 

V 

transform-origin: lOpx lOpx; /* para webkit */ 

} 

Como padrao as transudes sempre acontecem tendo como ponto de ancora 
o centra do objeto. Ha algumas situates que pode ser que voce queira 
modificar essa ancora, fazendo com que por exemplo, a rota^ao aconte^a em 
algum dos cantos do elemento. O codigo de exemplo acima fara com que a 
transforma^ao aconte^a a partir dos lOpx do topo no canto esquerdo. Veja a 
compara<;ao entre o padrao e o resultado do codigo acima. 
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A propriedade transform fica mais interessante quando a utilizamos com a 
propriedade transition, onde podemos executar algumas animates basicas 
manipulando os valores de transforma<;ao. 


INTRODUQAO AO CSS 3D 

O CSS 3D e sem duvida uma das features do CSS mais aguardadas por todas as 
crian^as do Brasil. Fala a verdade! Fazer efeitozinhos com sombra, gradientes, 
transparencias e etc ja foi um dia na vida do desenvolvimento algo bacana. 
Hoje e muito fora de moda. Carne de vaca, sabe? Por isso o CSS 3D e tao 
esperado. Ele trara para a web efeitos visuais para layout que antes so viamos 
em sistemas que rodam em smartphones, tipo um iPhone ou nos sistemas 
operacionais mais populares como Linux e OSX. 

Mas nao se anime muito. Eu sei que voce esta ansioso para sair por ai colocando 
efeitos 3D de CSS em tudo quanto e aplica^ao. Mas calma... entenda que o CSS 
foi feito para estilizar documentos. Voce o utiliza para melhorar a experiencia 
dos usuarios nos diversos dispositivos e nao para enfeitar seu website como se 
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fosse uma penteadeira. Lembra-se dos websites cheios de gifs animados? Pois 
e, cuidado para nao cair no mesmo erro. Voce estara utilizando o CSS 3D da 
maneira certa se seus efeitos passarem desapercebidos pelo usuario ao utilizar 
seu sistema. Encher seu sistema com efeitos a cada clique ou a cada a$ao pode 
fazer com que o usuario perca tempo e a paciencia. 

Mas vamos ao que interessa. 


O suporte 

Infelizmente isso ainda esta restrito para browsers. O Internet Explorer 
nao tem suporte ainda e nem tern data para tal. Todos os exercicios que 
voce ver neste post sao feitos para browsers que tem WebKit como motor 
de renderiza^ao. Por isso teste em seu Chrome ou no seu Safari. Eu testei 
no Chrome porque o Safari mostrou algumas inconsistencias. O Opera esta 
esperando as especificac^oes de CSS Transforms amadurecerem para adicionar 
este recurso. Testei no Firefox 8.0.1 e o exercicio nao funcionou. 

A degrada<;ao do CSS 3D para os browsers que nao o suportam e um pouco 
infeliz. Sugiro que se voce for utilizar essas features, tente faze-lo em projetos 
restritos para que nao haja problemas com usuarios de browsers antigos. Se 
ainda assim voce quiser arriscar, crie solu<;6es especifica para seu projeto, 
fazendo com que a experiencia do seu cliente nao seja muito prejudicada. 
Sugiro que utilize a biblioteca Modernizr para identificar os browsers que nao 
entendem o CSS 3D. 


Tudo e uma questao de perspectiva 

Para falar de 3D, precisamos falar sobre perspectiva. Para ativar uma area 3D 
o elemento precisara de perspectiva. 

Voce pode aplicar a perspectiva ao elemento de duas formas: utilizando 
diretamente a propriedade perspective ou adicionando um valor perspectiveQ 
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na propriedade transform, 
div { 

-webkit-perspective: 600; 

} 


Ou: 


div { 

-webkit-transform: perspective(600); 

} 

Estes dois formatos sao os gatilhos que ativam a area 3D onde o elemento ira 
trabalhar. 

O valor da perspectiva determina a intensidade do efeito. Imagine como se 
fosse a distancia de onde vemos o objeto. Quanto maior o valor, mais perto 
o elemento estara, logo, menos intenso sera o visual 3D. Logo, se colocarmos 
um valor de 2000, o objeto nao tera tantas mudan<;as visuais e o efeito 3D sera 
suave. Se colocarmos 100, o efeito 3D sera muito visivel, como se fosse um 
inseto olhando um objeto gigante. 

Voce tambem precisa entender sobre o ponto de fuga. O ponto de fuga 
por padrao esta posicionado no centro. Voce pode modificar essa posi^ao 
com a propriedade perspective-origin, que e muito parecido com a 
propriedade transform-origin, que define onde a a^ao de transforma^ao do 
objeto acontecera, nesse caso quando falamos de a^oes 2D. A propriedade 
perspective-origin afeta os eixos X e Y do elemento filho. 


CSS 3D Transforms 

Se voce ainda nao leu sobre CSS Transforms voce pode ler algo aqui e ver em 
a$ao aqui. As propriedades sao praticamente iguais, mas aplicadas para os 
principios de 3D e nao 2D. 
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Voce deve estar acostumado a trabalhar com os eixos X e Y no CSS padrao. No 
CSS 3D podemos manipular tambem o eixo Z, que representa a profundidade. 
Veja um exemplo utilizando os valores rotateY, rotateX e translateZ. Perceba 
que no translateZ eu utilizei valores negativos e positivos. Quando utilizo o 
valor negativo, o objeto fica “mais longe”, se coloco valores positivos, o objeto 
fica “mais perto”. 

Abaixo segue uma imagem do resultado do exemplo: 


Translate Z. 


^ \ 
t _\ 


Nos podemos utilizar tambem alguns atalhos para estes valores onde podemos 
definir as tres dimensoes de uma vez: 

translate3d(x,y,z) 
scale3d(x,y,z) 
rotate3d(x,y,z,angle) 

Muito importante: ao utilizar as propriedades resumidas, os browsers ativam 
automaticamente a acelera^ao por hardware no Safari para que as animates 
tenham uma melhor performance. 




















css 


Fazendo o efeito de Card Flip 


O efeito de Card Flip e muito conhecido entre os usuarios de iPhone. 


A estrutura HTML e esta: 

<section class=”geral”> 

<div class=”carta”> 

<figure class=”frente”ximg src=”card-front. 
jpg”x/figure> 

<figure class=”atras”ximg src=”card-back. 
jpg”x/figure> 

</div> 

</section> 


O elemento .geral e onde iniciaremos o ambiente 3D. O elemento .carta age 
como container dos objetos 3D. Cada face da carta esta separada por um 
elemento figure, com uma imagem. 


Para come^ar, precisamos aplicar a perspectiva para o elemento .geral iniciar 
o espa<;o 3D. 

.geral { 

width: 200px; 
height: 293px; 
position: relative; 
margin:10% auto 0; 

-webkit-perspective: 500; 

} 

Defini uma largura e altura, coloquei um position: relative; para que os 
elementos dentro dele sejam posicionados se referenciando por ele. Coloquei 
uma margem so para separa-lo do topo do body a fim de conseguirmos ver 
melhor os efeitos. 

Por fim, coloquei a propriedade -webkit-perspective: 500; para aplicarmos o 
efeito 3D. O valor de 500 faz uma boa perspectiva. 
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Agora definiremos as dimensoes da carta e suas propriedades. 

.carta { 
width: 100%; 
height: 100%; 
position: absolute; 

-webkit-transition: -webkit-transform Is; 

} 

Largura e altura precisam ser de 100% para definir a area que o 3D ira 
aplicar. O position: absolute; e necessario para que as cartas fiquem relativas 
ao elemento .geral. A propriedade -webkit-transition: -webkit-transform Is; 
define o tempo de transi^ao do efeito, neste caso ele vai durar 1 segundo. 


Formatando as cartas: 

.carta figure { 
margin:0; 
display: block; 
position: absolute; 
width: 100%; 
height: 100%; 

-webkit-backface-visibi1ity: hidden; 

} 

Vamos direto para a propriedade -webkit-backface-visibility: hidden; ja que 
as outras dispensam comentarios. Essa propriedade faz com que a face de tras 
da carta nao apare^a e nem se sobreponha no momento do efeito. 


E finalmente, para fazer com que a parte de tras da carta apare^a no verso 
correto, nos temos que rotaciona-la. 

.atras{-webkit-transform: rotateY(180deg);} 

E feito se completa com o trigger para fazer a anima^ao acontecer. Nesse caso 
farei com um hover no elemento .carta, onde iremos rotaciona-lo em -180 
graus. 
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.carta:hover { 

-webkit-transform: rotateY(-180deg); 

} 

E Voila! Se quiser brincar um pouco, modifique a origem da transforma^ao 
com a propriedade -webkit-transform-origin. Adicionando essa linha, a 
transforma^ao acontece para a direita em vez de ser pelo centra, como e o 
padrao: 

.carta:hover { 

-webkit-transform: rotateY(-180deg); 
-webkit-transform-origin: right center; 

} 


PROPRIEDADE TRANSITION 


Durante muito tempo o CSS so serviu para pintar quadradinhos e mais nada. 
Desde quando o pessoal do WaSP organizou todo o movimento dos Padroes 
Web fazendo com que todos os desenvolvedores, fabricantes de browsers e 
ate mesmo o W3C acreditassem no poder dos padroes nao houve grandes 
atualiza<;6es no CSS. Praticamente formatavamos font, background, cor, 
tamanhos e medidas de distancia e posi^ao. 

A propriedade transition, a regra keyframe e outras propriedades vieram 
vitaminar a fun<;ao que o CSS tem perante o HTML acrescentando maneiras 
de produzirmos animates e transi^oes. Nao estou dizendo que voce fara 
animates complicadas, com diversos detalhes tecnicos e etc. Para esse tipo 
de resultado existem outras ferramentas, incluindo Canvas e SVG, que com 
certeza farao um trabalho melhor com menos esfor^o. Mas e fato que as 
animates via CSS nos ajudam a levar a experiencia do usuario para outro 
patamar. 
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Lembrando que o nivel de suporte de algumas dessas tecnicas ainda e muito 
baixo. A propriedade transition funciona em boa parte dos browsers atuais. 
Mas a regra keyframe que nos permite controlar as fases de uma anima^ao 
ainda e muito restrito. Para uma tabela mais atual e detalhada de suporte e 
compatibilidade, fa<;a uma procura no Google ou procure no site Can I Use 
(http://caniuse.com/). Onde for possivel demonstrarei o codigo com o prefixo 
dos browsers que suportam as propriedades. 


Pequenas transiqoes 

A propriedade transition e praticamente auto explicativa. Sua sintaxe tao 
simples que talvez ate dispense explicates mais elaboradas. Vamos come^ar 
com o codigo abaixo: 

a { 

color: white; 
background: gray; 

} 

No codigo definimos que o link tera sua cor de texto igual a preta e seu 
background sera cinza. 


O resultado esperado e que ao passar o mouse no link a cor do texto seja 
modificada, mudando do branco para o preto e que a cor de background 
mude de cinza para vermelho. O codigo abaixo faz exatamente isso: 

a { 

color: white; 
background: gray; 

} 

a:hover { 

color: black; 
background: red; 

} 
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O problema e que a transi^ao e muito brusca. O browser apenas modifica as 
caracteristicas entre os dois blocos e pronto. Nao ha nenhuma transi^ao suave 
entre os dois estados. 

Podemos fazer a mudan<;a de um estado para outro utilizando a propriedade 
transition. Suponha que ao passar o mouse, as mudan(;as acontecessem em 
um intervalo de meio segundo. Bastaria colocar a propriedade transition no 
a:hover e pronto. Ao passar o mouse, o browser modificaria as caracteristicas 
do link com uma pequena transi^ao de meio segundo. O codigo seria como 
se segue abaixo: 

a:hover { 

color: black; 
background: red; 

-webkit-transition: 0.5s; /* Com prefixo do 
Safari */ 

transition: 0.5s; /* Para browsers que suportam 
a propriedade */ 

} 

Dessa forma a transi$ao apenas acontece quando o hover e ativado. O problema 
e que ao tirar o mouse, o browser volta bruscamente para as caracteristicas 
iniciais. Para modificar isso basta inserir tambem a propriedade transition no 
estado inicial. 

a { 

color: white; 
background: gray; 

-webkit-transition: 0.5s; 

} 

a:hover { 

color: black; 
background: red; 

-webkit-transition: 0.5s; 
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O que a propriedade transition faz e comparar os valores das propriedades em 
comum entre os dois estados do link ou de qualquer outro elemento, assim ela 
modifica suavemente os valores quando ha a ativa^ao da fun^ao. Esta e uma 
tecnica simples e que serve para manipularmos transudes basicas como cor, 
tamanho, posi^ao etc. 

Agora suponha que em um bloco ha uma determinada propriedade que no 
outro bloco nao ha, como no codigo abaixo: 


a { 

border:lpx solid orange; 
color: white; 
background: gray; 

-webkit-transition: 0.5s; 

} 

a:hover { 

color: black; 
background: red; 

-webkit-transition: 0.5s; 

} 

Nesse caso o browser detecta que ha uma propriedade no primeiro estado, 
mas nao no segundo, por isso ele nao faz a transi^ao desta propriedade, 
apenas das propriedades em comuns. 


Abaixo veja o codigo. copie em um arquivo HTML e veja o efeito: 

<!DOCTYPE htm1> 

<htmi 1ang=”pt-br”> 

<head> 

cmeta charset=”utf-8”> 

<titie>CSS Transition</titie> 

<styie type=”text/css” media=”screen”> 
a { 

col or:white; 
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backgrounckgray; 

-webkit-transition: 0.5s linear; 

} 

a:hover { 

color:black; 
background:red; 

-webkit-transition: 0.5s linear; 

} 

</styie> 

</head> 

<body> 

<a href=”#”>Link! Hello World!</a> 

</body> 

</html> 


PROPRIEDADE ANIMATION E REGRA 
KEYFRAME 

A propriedade trasition trabalha de forma muito simples. Voce praticamente 
diz para o browser qual o valor inicial e o valor final para que ele aplique 
a transi<;ao automaticamente, controlamos praticamente apenas o tempo de 
execu^ao. Para termos mais controle sobre a anima^ao temos a propriedade 
animation que trabalha juntamente com a rule keyframe. 

Basicamente voce consegue controlar as caracterlsticas do objeto e suas 
diversas transforma^oes definindo fases da anima^ao. Observe o codigo 
abaixo e veja seu funcionamento: 

@-webkit-keyframes rodar { 
from { 

-webkit-transform:rotate(Odeg); 

} 

to { 

-webkit-transform:rotate(360deg); 
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} 

} 

O codigo acima define um valor inicial e um valor final. Agora vamos aplicar 
esse codigo a um elemento. Minha ideia e fazer um DIV girar.;-) 

0 codigo HTML ate agora e este. Fiz apenas um div e defini este keyframe: 

<!DOCTYPE htm1> 

<htmi 1ang=’’pt-br”> 

<head> 

<titiex/titie> 

<meta charset=”utf-8”> 

<styie> 

@-webkit-keyframes rodaroda { 
from { 

-webkit-transform:rotate(Odeg); 

} 

to { 

-webkit-transform:rotate(360deg); 

} 

} 

</styie> 

</head> 

<body> 

<divx/div> 

</body> 

</htmI> 

Primeiro voce define a fun<;ao de anima^ao, no caso e o nosso codigo que 
define um valor inicial de 0 graus e um valor final de 360 graus. Agora vamos 
definir as caracteristicas deste DIV. 

div { 

width:50px; 
height:50px; 


} 


margin:30% auto 0; 
backg round:black; 


Nas primeiras linhas defini qual sera o estilo do div. Ele tera uma largura e 
uma altura de 50px. A margin de 30% do topo garantira um espa$o entre o 
objeto e o topo do documento e background preto. 

A propriedade animation tern uma serie de propriedades que podem ser 
resumidas em um shortcode bem simples. Veja a tabela logo a seguir para 
entender o que cada propriedade signifca: 


Propriedade Definite 


Propriedade 

Defini^ao 

animation-name 

Especificamos o nome da fun^ao de anima^ao 

animation-duration 

Define a dura^ao da anima<;ao. O valor e 
declarado em segundos. 

animation- timing- 
function 

Descreve qual sera a progressao da anima^ao 
a cada ciclo de dura^ao. Existem uma serie 
de valores possiveis e que pode ser que o seu 
navegador ainda nao suporte, mas sao eles: ease, 
linear, ease-in, ease-out, ease-in-out, cubic- 
bezier(<number>, <number>, <number>, 
<number>) [, ease, linear, ease-in, ease-out, 
ease-in-out, cubic-bezier(<number>, <number>, 
<number>, <number>)]*0 valor padrao e ease. 

animation-interation- 

count 

Define o numero de vezes que o ciclo deve 
acontecer. O padrao e um, ou seja, a anima^ao 
acontece uma vez e para. Pode ser tambem 
infinito definindo o valor infinite no valor. 
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animation-direction 

Define se a anima<;ao ira acontecer ou nao no 
sentido inverso em ciclos alternados. Ou seja, 
se a anima^ao esta acontecendo no sentido 
horario, ao acabar a anima^ao, o browser faz a 
mesma anima^ao no elemento, mas no sentido 
antihorario. Os valores sao alternate ou normal. 

animation-play- state 

Define se a anima^ao esta acontecendo ou se esta 
pausada. Voce podera por exemplo, via script, 
pausar a anima<;ao se ela estiver acontecendo. Os 
valores sao running ou paused. 

animation-delay 

Define quando a anima^ao ira come^ar. Ou seja, 
voce define um tempo para que a anima<;ao 
inicie. O valor 0, significa que a anima^ao 
come^ara imediatamente. 


Voltando para o nosso codigo, vamos aplicar algumas dessas propriedades: 
div { 

width:50px; 
height:50px; 
margin:30% auto 0; 
background:black; 

-webkit-animation-name: rodaroda; 

-webkit-animation-du rati on: 0.5s; 

-webkit-animation-timing-function: 1inear; 

-webki t-ani mati on-i terati on-count: i nfini te; 

-webkit-animation-directi on: alternate; 

} 

Veja que na propriedade animation-name chamamos o mesmo nome 
que demos na nossa fun<;ao de keyframe logo no comedo da explica^ao. 
Depois definimos uma dura^ao de ciclo de meio segundo. Definimos 
que o comportamento da anima^ao sera linear, e com a propriedade 
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animation-iteration-count definimos que ele girara infinitamente. E por 
ultimo definimos pelo animation-direction que a anima^ao devera ser 
alternada, ou seja, o DIV girara para um lado, e quando alcan^ar o final da 
anima<;ao, o browser devera alternar essa anima<;ao. 

Podemos melhorar esse codigo utilizando a versao shortcode, que e mais 
recomendado. Veja a ordem que devemos escrever as propriedades animation 
em forma de shortcode: 

animation: [<animation-name> || <animation-duration> 

|| <animation-timing-function> || <animation-delay> || 
<animation-iteration-count> || <animation-direction>] [, 
[<animation-name> || <animation-duration> || <animation- 
timing-function> || <animation-delay> || <animation- 
iteration-count> || <animation-direction>] ]* 

Aplicando isso ao nosso codigo: 

div { 

width:50px; 
height:50px; 
margin:30% auto 0; 
background:black; 

-webkit-animation: rodaroda 0.5s linear infinite 
alternate; 

} 

Pronto. Agora temos um elemento que gira sem parar, ora para direita ora 
para esquerda. 


Definindo ciclos 


Nos definimos no keyframe do nosso ultimo exemplo apenas um inicio 
e um fim. Mas e se quisessemos que ao chegar na metade da anima^ao o 
nosso elemento ficasse com o background vermelho? Ou que ele mudasse 
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de tamanho, posi^ao e etc? E ai onde podemos flexibilizar melhor nosso 
keyframe definindo as fases da anima^ao. Por exemplo, podemos dizer para o 
elemento ter uma cor de background diferente quando a anima^ao chegar aos 
10% do ciclo, e assim por diante. 

Veja o exemplo: 

@-webkit-keyframes rodaroda { 

0% { 

-webkit-transform:rotate(Odeg); 

} 

50% { 

background:red; 

-webkit-transform:rotate(180deg); 

} 

100% { 

-webkit-transform:rotate(360deg); 

} 

} 

Definimos acima que o inlcio da anima^ao o elemento come^ara na posi^ao 
normal, 0 graus. 

Quando a anima^ao chegar aos 50% do ciclo, o elemento devera ter girado 
para 180 graus e o background dele deve ser vermelho. E quando a anima^ao 
chegar a 100% o elemento deve ter girado ao todo 360 graus e o background, 
como nao esta sendo definido, volta ao valor padrao, no nosso caso black, que 
foi definido no CSS onde formatamos este DIV. 

Logo nosso elemento girara pra sempre e ficara alternando a cor de fundo 
de preto para vermelho. Fiz um exemplo bem simples modificando apenas 
o background, mas voce pode muito bem definir um position e modificar os 
valores de left e top para fazer o elemento se movimentar. 

No exemplo tambem defini apenas 3 estagios (0%, 50% e 100%) voce pode 
definir um maior numero de estagios: 5%, 10%, 12%, 16% e etc... Adequando 
as fases da anima^ao as suas necessidades. 
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Ha exemplos muito interessantes na internet onde podemos ver todo o poder 
das animates feitas pela CSS. Veja o exemplo que fizemos aqui neste texto no 
endere^o: http://migre.me/4ubym 


MODULO TEMPLATE LAYOUT 


Para mim a parte mais facil de desenvolver um site com CSS e o planejamento 
e diagrama<;ao do layout. Coincidentemente e a parte que mais os 
desenvolvedores tern problemas de compatibilidade crossbrowser ou por 
falta de recursos mais avan$ados. Mas se voce parar para pensar, apenas uma 
propriedade cuida dessa parte, que e a propriedade float. Ate agora, para mim, 
o float era a propriedade mais importante que existia no CSS. O float cuidava 
de toda a diagrama<;ao do site, desde os elementos que definiam as areas 
principals do site ate os pequenos detalhes de imagens e icones. 

A propriedade float e muito simples de se entender. O problema nao e o 
funcionamento, mas os efeitos que a propriedade float causa nos elementos 
proximos. Se voce pede para duas colunas ficarem flutuando a esquerda e outra 
coluna a direita, o rodape sobe. Ou se voce coloca um elemento envolvendo 
outros elementos com float, esse elemento perde a altura. Estes sao problemas 
corriqueiros que ja tem solu<;6es intebgentes e que nao apresentam chatea^oes 
mais graves. 

Infelizmente o float nao e o ideal para a diagrama^ao e organiza^ao dos 
elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em 
diversos sentidos. A principal desvantagem do float e que ele e completamente 
dependente da ordem dos elementos no HTML. Existem tecnicas que voce 
consegue fazer quase que qualquer oganiza^ao visual sem encostar no codigo 
HTML. Mas ha outras necessidades que invariavelmente voce precisara 
modificar a ordem dos elementos no meio do HTML para que a diagrama^ao 
do site saia conforme o esperado. Essa organiza<;ao do HTML pode alterar 
desde programa<;ao server-side e ate resultados de SEO e acessibilidade. Por 
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isso e interessante que o HTML fique organizado de forma que ele supre as 
necessidades dessas bases. Sua organizado visual deve ser independente desta 
organizado. Quem nunca sentiu falta de alternar a posi^ao dos elementos 
verticalmente? 

Tendo em vista estes e outros problemas o W3C criou um novo modulo. Na 
verdade ele nao e o unico e nem pode ser para que tenhamos diversas formas 
de trabalhar. O modulo em questao e chamado de Template Layout. Esse 
modulo consiste em uma forma de criarmos e organizarmos os elementos e 
informa^oes do layout de forma menos espartana e mais flexivel. 

Podemos dividir a construdo do layout em duas grandes partes: 1) Defin^ao 
dos elementos mestres e grid a ser seguido. 2) Formata^ao de font, cores, 
background, bordas etc. 

As propriedades nesta especifica^ao trabalham associando uma politica 
de layout de um elemento. Essa politica e chamada de template-based 
positioning (nao tern nada a ver com a propriedade position, pelo contrario 
e uma alternativa) que da ao elemento um grid invisivel para alinhar seus 
elementos descendentes. 

Porque o layout deve se adaptar em diferentes janelas e tamanhos de papeis, as 
colunas e linhas do grid deve ser fixas ou flexiveis dependendo do tamanho. 

O W3C mostra alguns casos comuns: 

- Paginas complexas com multiplas barras de navega^ao em areas com 
posi<;6es fixas como publicidade, submenus e etc. 

- Formularios complexos, onde o alinhamento de labels e campos podem 
ser facilmente definidos com as propriedades deste modulo com a ajuda das 
propriedades de margin, padding e tables. 


- GUIs, onde botoes, toolbars, labels, icones etc, tem alinhamentos complexos 
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que precisam estar sempre alinhados caso o tamanho ou a resolu^ao da tela 
mudem. 

- Mldias que sao paginadas, como Mldias de impressao onde cada pagina sao 
divididos em areas fixas para conteudos de diferentes generos. 

Template-based positioning sao uma alternativa para a propriedade 
position com o valor absolute. Antigamente lembro-me que quase todos os 
desenvolvedores tentavam organizar e diagramar layouts utilizando position. 
Nao que seja errado, mas definitivamente nao e a melhor forma. Costumo 
dizer em meus cursos e palestras que position e para detalhes. Nada muito 
grande, mas para pequenos detalhes. Usamos position para posicionarmos 
elementos que nao tern rela^ao direta com sua posi^ao no codigo HTML. Ou 
seja, nao importa onde o elemento esteja, o positiomabsolute; ira posicionar o 
elemento nas coordenadas que voce quiser. 


SlNTAXE E FUNCIONAMENTO 


O modulo Template Layout basicamente define slots de layout para que voce 
encaixe e posicione seus elementos. O mapeamento dos slots e feito com 
duas propriedades que ja conhecemos que este modulo adiciona mais alguns 
valores e funcionalidades, sao as propriedades position e display. 

A propriedade display define como sera o Grid, ou seja, quantos espa^os uteis 
tera o layout e a propriedade position ira posicionar seus elementos nestes 
slots. 


Veja o codigo HTML abaixo: 

<div ciass=”gera1”> 

<nav ciass=”menu”>...</nav> 

<aside class=”menuiatera1”>...</aside> 
<aside ciass=”pubiicidade”>...</aside> 
<articie ciass=”post”>...</articie> 
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<footer>...</footer> 
</div> 


Agora iremos definir a posi^ao destes elementos. O codigo CSS seria assim: 

.geral { 

display: “aaa” 

“bed” 

“eee”; 

} 

nav.menu {position:a;} 
aside.menulateral {position:b;} 
aside.publicidade {position:d;} 
article.post {positions;} 
footer {positions;} 


O FUNCIONAMENTO DA PROPRIEDADE DISPLAY 

A propriedade display define a organiza^ao dos slots. Um slot e o local onde 
os elementos serao colocados. 

Aqui o elemento display trabalha como um table, onde seu conteudo sera 
colocando em colunas e linhas. A unica diferen<;a e que o numero de linhas 
e colunas nao dependem do conteudo. A outra principal diferen<;a e que a 
ordem dos descendentes no codigo nao importa. Ou seja, nao importa a 
estrutura dos elementos no HTML, voce pode coloca-los em qualquer lugar 
do layout. 

Cada letra diferente e um slot de conteudo diferente. O @ (arroba) define um 
sinal para um slot padrao. E o (ponto) define um espa^o em branco. 

Quando repetimos as letras como no exemplo anterior, tanto na horizontal 
quanto na vertical, e formado um slot unico que se expande para o tamanho 
da quantidade de slots. Lembra do colspan ou rowspan utilizados na tabela? 
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Pois e, funciona igualzinho. 

Nao e possivel fazer um slot que nao seja retangular ou varios slots com a 
mesma letra. Um template sem letra nenhuma tambem nao e possivel. Um 
template com mais de um @ tambem e proibido. Se houverem esses erros a 
declara(;ao e ignorada pelo browser. 

Para definir a altura da linha (row-height) podemos utilizar o valor padrao 
“auto”, que define a altura da linha de acordo com a quantidade de conteudo 
no slot. Voce pode definir um valor fixo para a altura. Nao e possivel definir 
um valor negativo. Quando definimos um * (asterisco) para a altura, isso quer 
dizer que todas as alturas de linha serao iguais. 

A largura da coluna (col-width) e definida com valores fixos, como o row- 
height. Podemos definir tambem o valor de * que funciona exatamente igual ao 
altura de linha, mas aphcados a largura da coluna. Ha dois valores chamados 
max-content e min-content que fazem com que a largura seja determinada de 
acordo com o conteudo. Outro valor e o minmax(p,q) que funciona assim: a 
largura das colunas sao fixadas para ser maiores ou iguais ape menores ou 
iguais a q. Pode haver um espa^o branco (white space) em volta de p e q. Se 
q > p, entao q e ignorado e o minmax(p,q) e tratado como minmax(p,p). O 
valor fit-content e o equivalente a minmax(min-content, max-content). 


Definindo a largura E ALTURA DOS SLOTS 

Para definir a altura dos slots, utilizamos uma sintaxe diretamente na 
propriedade display. Veja abaixo um exemplo de como podemos fazer isso: 

display: “a a a” /150px 
“b c d” 

“e e e” / 150px 
lOOpx 400px lOOpx; 

Formatando de uma maneira que voce enteda, fica assim: 
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display: “a 

a 

a” /150px 

“b 

c 

d” 

“e 

e 

e” /150px 

lOOpx 

400px 

lOOpx; 


Ou seja, a primeira coluna do grid tera lOOpx de largura, a segunda 400px e 
a terceira lOOpx. 

As medidas que coloquei ao lado, iniciando com uma / (barra) definem a 
altura das linhas. Logo a primeira linha tera 150px e a terceira linha tambem. 
A linha do meio, como nao tern altura definida tera a altura de acordo com a 
quantidade de conteudo. 


Navega^ao 


Clima 


Futebol 

aqui ficara informagoes 

Xadrez 

aquifkarfinforma?6es 

Notfcias 





Copyright e outras tranqut 





O espa^o entre as colunas sao definidos com (pontos). Veja o exemplo 
abaixo: 


“a 

a 

a” /150px 



/50px 

“b 

c 

d” 



/50px 

“e 

e 

e” /150px 

lOOpx 

400px 

lOOpx; 


No exemplo acima fiz duas colunas no codigo compostos por pontos em vez 
de fazer com letras. Isso quer dizer que entre as colunas do grid havera um 
espacjo em branco de 50px de altura. 












O FUNCIONAMENTO DA PROPRIEDADE POSITION 


O valor da propriedade position especifica qual linha e coluna o elemento sera 
colocado no template. Voce escreve apenas uma letra por elemento. Varios 
elementos podem ser colocados em um mesmo slot. Logo estes elementos 
terao o mesmo valor de position. 

Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O 
layout e muito simples: 



150px 

50px 


50px 

150px 


Este layout e representado pelo codigo abaixo. Primeiro o HTML: 

<ul id=”nav”> 

<1i>navigation</li> 

</ul > 

<div id=”content”> 

<div class=”module news”> 
<h3>Weather</h3> 

<p>There will be weather</p> 

</div> 

<div class=”module sports”> 

<h3>Footba1 ~\ </h3> 

<p>Peop1e like football.</p> 

</div> 

<div class=”module sports”> 
<h3>Chess</h3> 

<p>There was a brawl at the chess 
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tournament</p> 

</div> 

<div class=”module personal”> 

<h3>Your Horoscope</h3> 

<p>You’re going to die (eventually).</p> 
</div> 

<p id=”foot”>copyright some folks</p> 

</div> 


Agora veja o CSS com toda a magica: 


body { 

display: “a b” 
lOem *; 

} 

#nav { 

position: a; 

} 

#content { 

position: b; 

display: “c . d . e “ 



} 

.module.news {position: c;} 
.module.sports {position: d;} 
.module.personal {position: e;} 
#foot {position: f;} 


Lembre-se que nao importa a posi^ao dos elementos no codigo. E essa 
e a magica. Podemos organizar o codigo HTML de acordo com nossas 
necessidades e levando em considera^ao SEO, Acessibilidade e processo 
de manuten^ao. O HTML fica totalmente intacto separado de qualquer 
formata^ao. Muito, mas muito interessante. 
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PSEUDO-ELEMENTO "SLOtQ 

Um slot e uma area do layout separada para colocarmos os elemetnos que 
escolhermos. Suponha que voce queira que um determinado slot tenha um 
fundo diferente, alinhamento e etc... Essa formata^ao sera aplicada diretamente 
no slot e nao no elemento que voce colocou la. Fica mais simples de formatar 
porque voce nao atrela um estilo ao elemento e sim ao slot. Se voce precisar 
posicionar aquele elemento em outro lugar, voce consegue facilmente. 

body { display: “aaa” 

“bed” } 

body::slot(b) { background: #FF0 } 
body::slot(c), body::slot(d) { vertical-aiign: 
bottom } 

As propriedades aplicadas no pseudo elemento slot() seguem abaixo: 

Todos as propriedades background. 

vertical-align 

overflow 

box-shadow, block-flow e direction ainda estao sendo estudados pelo W3C se 
elas entrarao ou nao. 


Mas e o float? 

E senhores... Eu acho que o float tern seus dias contados para a cria^ao de 
estruturas de layouts. Quando utilizamos o float para estruturar o layout, 
nos dependemos profundamente da organiza^ao e posi^ao dos elementos no 
codigo HTML. Nao estou dizendo que o float ficara obsoleto, voce ainda vai 
utiliza-lo e muito. Voce vai para-lo de utilizar para criar a base estrutural do 
site. Ou seja, a estrutura basica de divisao de conteudo sera feita pelo Template 
Layout, mas muitos dos detalhes internos e organizaejao dos elementos 
contidos nos elementos mestres serao feitos com float. 


Com o Template Layout a estrutura do layout nao depende da posi<;ao dos 

w 
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elementos do HTML no codigo, voce podera otimizar o codigo ao maximo 
para os leitores de tela e sistemas de busca, ja que estes meios de acesso prezam 
pela estrutura do seu conteudo. 

Ja funciona? 

Sim, ja funciona, mas nao nativamente nos browser. Esta especifica<;ao ainda 
e um rascunho do W3C e por isso os browsers ainda nao a suportam. Mesmo 
assim um desenvolvedor criou um script em Javascript que entende o CSS 
desta especificac^ao e Simula os resultados. Funciona muito bem. 


PAGED MEDIA 

Com certeza voce ja deve ter tentado ler um livro ou uma apostila em algum 
site na web e preferiu imprimir o texto para ler offiline, no papel por ser mais 
confortavel ou por ser mais pratico quando nao se esta conectado. Existem 
varios motivos para que um leitor queira imprimir o conteudo de um site, 
principalmente sites com textos longos e pesados. Durante muito tempo o 
principal motivo era que ler na tela do computador era cansativo. Hoje isso 
ainda e um problema, mas com o avanqo das telas e do aparecimento das 
tablets no mercado, voce consegue passar mais tempo na frente de uma 
tela lendo grandes quantidades de texto. O problema e que geralmente 
a organiza<;ao de paginas e o conteudo nao e exatamente confortavel para 
passarmos horas lendo. 

Outro problema comum e que nos desenvolvedores nao temos uma maneira 
facil de formatar paginas. Na verdade temos, mas e um pouco de gambiarra e 
claro, nao e maneira correta. A especifica^ao de Paged Media nos possibilita 
formatar as paginas, transparencias (aqueles “plasticos“ que usamos com 
retroprojetores) ou ate mesmo paginas que serao vistas pelo monitor. 
Controlaremos suas medidas, tamanhos, margens, quebras de paginas e etc... 

Nota: Para voce nao se confundir, quando digo paginas, quero dizer paginas 


ffsicas, de papel, nao paginas web, ok?;-) 


(SPAGE 

Definiremos com CSS3 um modelo de pagina que especifica como o documento 
sera formatado em uma area retangular, chamada de page box, com larguras 
e alturas limitadas. Nem sempre o page box tem referenda correspondente 
para uma folha de papel fisica, como normalmente conhecemos em diversos 
formatos: folhas, transparencias e etc. Esta especifica^ao formata o page box, 
mas e o browser ou o meio de acesso que o usuario esta utilizando que tem a 
responsabilidade de transferir o formato do page box para a folha de papel no 
momento da impressao. 

O documento e transferido no modelo da pagina para um ou mais page 
boxes. O page box e uma caixa retangular que sera sua area de impressao. Isso 
e como se fosse um viewport do browser. Como qualquer outro box, a page 
box tem margin, border, padding e outras areas. O conteudo e as areas de 
margin do page box tem algumas fun^oes especicias: 

A area de conteudo do page box e chamada de area da pagina ou page area. O 
conteudo do documento flui na area de pagina. Os limites da area da pagina 
na primeira pagina estabelece o retangulo inicial que contem o bloco do 
documento. 

A area da margem da page box e dividido em 16 caixas de margem ou margin 
boxes. Voce pode definir para cada caixa de margem sua propria borda, 
margem, padding e areas de conteudo. Normalmente essas caixas de margem 
sao usadas para definir headers e footers do documento. Confesso que o nome 
utilizado (caixas de margem) e meio estranho. 

As propriedades do page box sao determinadas pelas propriedades 
estabelecidas pelo page context, o qual e a regra de CSS @page. Para definir a 
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largura e altura de uma page box nao se usa as propriedades width e height. 
O tamanho da page box e especificada utilizando a propriedade size no page 
context. 

Terminologia e Page Model (modelo de pAgina) 

O page box tem algumas areas simples de se entender que facilitara a 
explica<;ao. Veja abaixo uma imagem e uma explica<;ao de suas respectivas 
areas: 

Page box 

O page box e onde tudo acontece. Tenha em mente que o page box e o viewport 
das medidas impressas. E la que contera as areas de margem, padding, border 
e onde o texto sera consumido. 

A largura e altura do page box e determinada pela propriedade size. Em um 
caso simples, o page box tem a largura e a altura de uma folha. Entretanto 
em casos complexos onde page box difere das folhas de papel em valores e 
orientates ja que voce pode personalizar de acordo com sua necessidade. 

Page area 

A page area e a area de conteudo (content area) do page box. 

Margin box 

Margin boxes contem boxes para header e footer. Sao conjunto de 16 caixas 
onde voce pode inserir conteudo util como numero da pagina, titulo do livro, 
etc, etc, etc. Essas areas ficam fora do Page area. Cada um tem suas margins, 
paddings e bordas individuals. Veja o diagrama abaixo para visualizar melhor. 
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Page sheet 

A folha, a pagina, a superficie que sera impresso o conteudo. A ilustra^ao 
abaixo mostra a representa^ao de uma folha. 


Folha - Pagina 

Area nao impressa 


Area de impressao 
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Non-printable area - Area nao impressa 

A area de nao impressao e a area onde o dispositivo de impressao nao e capaz 
de imprimir. Esta area depende do dispositivo que voce esta utilizando. O 
page box fica dentro da area de impressao. 

Area de impressao 

A area impressa e onde o dispositivo de impressao e capaz de imprimir. A 
area de impressao e o tamanho da page sheet menos a area de nao impressao. 
Como a area de nao impressao, a area util de impressao depende muito do 
dispositivo. O dispositivo pode ajustar o conteudo para que seja impresso sem 
problemas nessa area. Cada dispositivo tem seu meio de ajuste. 

Propriedade size 

A propriedade size especifica o tamanho e a orienta<;ao da area do de conteudo, 
o page box. O tamanho do page box pode ser definida com valores absolutos 
(px) ou relativos (%). Voce pode usar tres valores para definir a largura e a 
orienta^ao do page box: 

auto 

O page box ira ter o tamanho e orienta^ao do page sheet escolhido pelo 
usuario. 

landscape 

Define que a pagina sera impressa em modo paisagem. O page box neste 
caso tem o mesmo tamanho da pagina, mas o lado maior e o horizontal. Se o 
tamanho da pagina nao for definido, o tamanho e especificado pelo usuario 
e seu dispositivo. 
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portrait 

Define que a pagina sera impressa em modo retrato. O page box neste caso 
tem o mesmo tamanho da pagina, mas o lado maior e o vertical. Se o tamanho 
da pagina nao for definido, o tamanho e especificado pelo usuario e seu 
dispositivo. 


Veja um exemplo abaixo: 

©page { 

size: auto; /* auto e o valor padrao */ 
margin: 10%; /* margem */ 

} 

Como nessa caso a margem e variavel, ela esta sendo relativa as dimensoes 
da pagina. Logo se a pagina uma A4, com as dimensoes: 210mm x 297mm, as 
margens serao 21mm e 29.7mm. 


Outro exemplo: 


©page { 

size: 210mm 297mm; /* definindo page-sheet para um 
tamanho de A4 */ 

} 


Page-size 

O page-size pode ser especificado utilizando um dos media names abaixo. 
Isso e o equivalente a utilizar os valores escritos diretamente na propriedade 
size. Contudo e muito melhor utilizar o nome de um formato de formato de 
papel. 
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Formato 


Descri(jao 
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A5 

A pagina deve ser definida para o tamanho ISO A5: 
148mm x 210mm. 

A4 

A pagina deve ser definida para o tamanho ISO A4: 
210 mm x 297 mm. 

A3 

A pagina deve ser definida para o tamanho ISO A3: 
297mm x 420mm. 

B5 

A pagina deve ser definida para o tamanho ISO B3 
media: 176mm x 250mm. 

B4 

A pagina deve ser definida para o tamanho ISO B4: 
250mm x 353mm. 

letter 

A pagina deve ser definida para o tamanho papel 
carta: 8.5polx 11 pol 


Abaixo veja um exemplo de aplica<;ao: 


©page { 

size: A4 landscape; 

} 


O W3C tem uma especifica<;ao muito extensa que pode ser encontrada aqui: 
http://www.w3.org/TR/css3-page/ 


PRESENTATION-LEVELS 


A informa^ao na web e reutilizada de diversas maneiras. Toda informa^ao 
publicada e reutilizada por diversos meios de acesso, seja o seu browser, 
leitor de tela ou robos de busca. O HTML proporciona essa liberdade para 
a informa^ao. Por ser uma linguagem muito simples, podemos reutilizar a 
informa^ao marcada com HTML em diversos meios de acesso. Mas o HTML 
nao cuida da forma com que o usuario vai visualizar a informa<;ao em seu 
dispositivo. O HTML apenas exibe a informa<;ao. A maneira que o usuario 
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consome essa informa^ao e diferente em cada um dos meios de acesso e 
dispositivos. E ai que entra todo o poder do CSS. O CSS formata a informa^ao 
para que ela possa ser acessivel em diversos user agents (meios de acesso). Se 
voce acessa um determinado site por um monitor de 22” ou pelo celular, a 
informa^ao tern que aparecer bem organizada em ambos os cenarios. E o CSS 
que organiza visualmente essas informa^oes. 

Alem disso podemos apresentar a informa^ao de diversas formas em um 
mesmo dispositivo. Por exemplo: voce pode ver uma galeria de imagens da 
maneira convencional, clicando nas thumbs das fotos ou ver em forma de 
slideshow. Podemos levar essas experiences para websites de conteudo textual 
tambem. A especifica^ao de presentation-levels e uma das especifica^oes que 
levam o usuario a terem conteudo mostrados de uma outra forma da qual 
estamos acostumados. E muito util para apresentacjoes de slides, com efeitos, 
transi^oes e etc ou qualquer documento que seria melhor apresentado no 
formato de apresenta$ao, como uma proposta, documentos tecnicos e etc. 


Como funciona o modelo 

O modelo por tras da especifica^ao e simples. Cada elemento no documento 
e definido como um “elemento de apresenta<;ao“ ou no formato original 
“elements presentation level" - EPL. 

O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente 
baseado na posi^ao do elemento pela estrutura do documento. E assim que 
o browser calcula para mostrar os elementos progressivamente, como se faz 
normalmente em programas de apresenta^ao. 

O elemento fica em um dos tres seguintes niveis que tambem sao representadas 
por classes: below-level, at-level e above-level. Dependendo da pontua<;ao 
de EPL que o browser da, o elemento fica em um determinado nivel. Essas 
pseudo-classes podem e devem ser modificadas via CSS. 
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A PROPRIEDADE PRESENTATION-LEVEL 

A propriedade presentation-level define como os valores de apresenta^ao 
(EPL) de um determinado objeto devem ser calculados. Sao tres valores 
possiveis: numeros inteiros, increment e same. 

Quando definimos um valor inteiro, o elemento tern aquele valor ftxo. 

Quando colocamos increment, o valor do objeto aumenta um ponto em 
rela<;ao ao objeto anterior. Suponha que ha duas LI em uma UL. A primeira 
LI tern o valor de 1, a segunda tern valor de 2 e assim por diante. 

Quando definimos o valor same, o browser computa o mesmo valor do objeto 
anterior. 

Isso tudo vai ficar mais esclarecido com os exemplos a seguir. 

Utilizando o mesmo exemplo da especifica^ao do W3C, temos o codigo 
abaixo: 


<!DOCTYPE html> 

<htm1> 

<body> 

<hl>strategies</hl> 

<h2>our strategy</h2> 

<u1> 

<"li>divide</H> 

<1i>conquer 

<p>(in that order)</p> 
</li> 

</ul> 

<h2>their strategy</h2> 
<ul> 

<1i>obfuscate</li> 

<1i>propagate</li> 

</u1> 
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</body> 

</html> 


CSS 


Vamos definir o CSS de presentation-levels para esse HTML adicionado o 
codigo CSS: 


©media projection { 

hi { page-break-before: always } 
li { presentation-level: increment } 
:below-level { color: black } 
:at-level { color: red } 

:above-level { color: silver } 

} 

Definimos que o HI ira sempre iniciar em uma nova pagina. 


Mas o mais importante e a propriedade presentation-level que definimos para 
a LI. Isso quer dizer que a cada LI o browser contara mais um ponto. 

As tres pseudo-classes que falamos no comedo do texto: below-level, at-level, 
above-level, que formata os elementos que foram mostrados anteriores, o que 
elemento que esta sendo mostrado e o proximo elemento. 

Sendo assim, o browser calcula a pontua^ao de cada um dos elementos 
utilizados no exemplo como mostra abaixo: 


HTML 

Valor de EPL 

<hl >strategies</hl > 

0 

<h2>our strategy</h2> 

0 

<ul> 

0 

<li>divide</li> 

1 

<li>conquer</li> 

2 

</ul> 

0 
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<h2>their strategy</h2> 

0 

<ul> 

0 

<li>obfuscate</li> 

1 

<li>propagate</li> 

2 

</ul> 

0 


Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com 
os valores de EPL: 

<!DOCTYPE html> 

<html> 

<style> 

©media projection { 
hi { presentation-level: 0; } 

h2 { presentation-level: 1; } 

h3 { presentation-level: 2; } 

body * { presentation-level: 3; } 

:above-level { display: none; } 

} 

</style> 

<body> 

<hl>strategies</hl> 

<h2>our strategy</h2> 

<ul> 

<1i>divide</li> 

<1 i>conquer</li> 

</ul> 

<h2>their strategy</h2> 

<ul> 

<1i>obfuscate</li> 

<1i>propagate</li> 

</ul> 

</body> 

</html> 


Perceba que agora definimos no CSS que tudo dentro de body tem o valor de 
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3. Logo o HI que foi definido como 0 pela propriedade presentation-level tem 
o valor de 3. 

Definimos tambem display:none; para os proximos elementos. 

Agora veja a pontua<;ao aplicada: 


HTML 

Valor de EPL 

<hl >strategies</hl > 

3 

<h2>our strategy</h2> 

2 

<ul> 

0 

<li>divide</li> 

0 

<li>conquer</li> 

0 

</ul> 

0 

<h2>their strategy</h2> 

2 

<ul> 

0 

<li>obfuscate</li> 

0 

<li>propagate</li> 

0 

</ul> 

0 


O W3C em uma especifica^ao completa e em constante atualiza^ao do 
presentation-levels aqui: http://www.w3.org/TR/css3-preslev/ 
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BROWSERS 


Motores de Renderizaqao 

Quem nunca teve problemas para manter a compatibilidade do seu codigo 
entre os diversos browsers do mercado? Entender a particularidadade de cada 
browser e um trabalho muito complexo. Cada browser tem sua frequencia de 
atualiza<;ao e sincronizar todas essas atualiza^oes e praticamente impossivel. 
Uma maneira mais segura de manter o codigo compativel, e nivelando o 
desenvolvimento pelos motores de renderiza^ao. Cada browser utiliza um 
motor de renderiza^ao que e responsavel pelo processamento do codigo da 
pagina. 

Abaixo, segue uma lista dos principals browsers e seus motores: 


Motor 

Browser 

Webkit 

Safari, Google Chrome, Mobile Safari, Android Browser, 


alguns celulares da Nokia e da RIM. 

Gecko 

Firefox, Mozilla, Camino, Flock, Firefox para Android 

Trident 

Internet Explorer 4 ao 9 

Presto 

Opera 7 ao 10 


Focando a compatibilidade nos motores de renderiza^ao voce atingira uma 
amplitude maior de browsers. Por exemplo, se seu codigo funcionar no 
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Webkit, voce alcan^ara o Safari e o Chrome, dois dos principals browsers do 
mercado para desktops. Alem disso, voce tambem alcanna aparelhos como 
Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android. 


Prefixos de browsers 

Antes de come^ar os proximos assuntos, e ncessario que voce conhe^a e saiba 
os porques da utiliza<;ao dos prefixos para browsers. 

Muitas das caracteristicas do CSS, principalmente da sua versao 3 ainda 
estao em fase de adequa^ao e testes, portanto elas nao foram implementadas 
definitivamente em alguns browsers e para evitar conflitos e tambem conseguir 
informa^oes de feedback sobre o funcionamento dessas propriedades para 
fazer futuras adapta<;oes ou corre<;6es. Outro ponto importante, e que algum 
destes fabricantes de browsers podem querer suportar uma determinada 
propriedade que ainda nao faz parte do core do CSS mas que poderia ser muito 
util para voce utilizar em lugares especificos hoje, com muita cautela, daro. 

A tabela abaixo nos mostra os prefixos dos principals browsers do mercado. 
Durante toda minha experiencia com Web, utilizei muitas vezes os prefixos do 
Firefox, Safari e Opera, quase nunca utilizei o prefixo para Internet Explorer. 
Creio que irei utiliza-lo mais agora, ja que ele esta entrando pra valer com o 
IE9 e suas atualiza^oes. 


Safari 

-webkit- 

Firefox 

-moz- 

Opera 

-0- 

Chrome 

-chrome- 

Internet Explorer 

-ms- 

Konqueror 

-khtml- 









Browsers 


Como utilizar um prefixo? 

Nao se assuste, se voce utilizara uma propriedade de CSS que ainda esta sendo 
planejada mas ainda assim quer aplicar em seu projeto para que os usuarios de 
novos browsers possam usufruir com uma melhor experiencia ao acessar seu 
site, seu codigo pode ficar um pouco confuso. Por isso, organize-se melhor ao 
decidir quais propriedades voce gostara de experimentar. 

Para exemplo vamos utilizar a propriedade border-radius. Se quisessemos 
fazer uma borda arredondada com lOpx, fariamos assim: 

div { 

-webkit-border-radius: lOpx; 

-moz-border-radius: lOpx; 
border-radius: lOpx; 

} 

Note que colocamos por ultimo a propriedade verdadeira, sem nenhum 
prefixo, essa propriedade cobrira os browsers que nao precisam da utiliza<;ao 
de prefixos para renderizar a propriedade, por exemplo o Opera e o Internet 
Explorer 9. 


Prefixos sao css-hacks? 

Nao. Nem se comparam. 

Com os prefixos voce esta ajudando os fabricantes e o W3C a entenderem 
melhor novas propriedades. Concordo com voce que o codigo nao fica muito 
bonito de se ver e que pode causar muito transtorno quando mal organizado. 
Diferentemente dos css-hacks os prefixos fazem parte dos padroes web. 
Os css-hacks exploram uma falha/bug do browser, criando um codigo que 
apenas um determinado browser identifique ou ignore. Normalmente para 
isso usamos a sintaxe do CSS de forma errada como: w\idth:200px; ou 
_width:200px;. 
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Ao utilizar CSS Hacks colocamos o projeto em risco. Os browsers passarao 
a ignorar esse codigo e se seu CSS estiver baseado nele, provavelmente algo 
vai quebrar. Eu costumo sugerir esse tipo de hack apenas para versoes muito 
antigas do IE como a versao 6, que e uma versao que no cenario atual oferece 
muitos problemas de compatibilidade. 
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COMO SERA? 


Entenda que este livro aborda duas tecnologias e alguns conceitos que estao em 
pauta agora no mercado de desenvolvimento web. Voce ja imaginou o que sera 
do HTML ou do CSS daqui ha 5 ou 10 anos? Sera que ainda iremos continuar 
escrevendo CSS e HTML como fazemos hoje? Sera que iremos utilizar outras 
linguagens ou vamos ainda manter os mesmos costumes e conceitos? 

Eu nao sei, mas provavelmente vai ser muito divertido desenvolver interfaces 
para celulares transparentes, televisoes gigantes touch screens ou sistemas 
inteligentes que leem telas e respondem perguntas complexas. 

Quero que voce lembre que nao importa o futuro, mas a informa^ao precisa 
estar sempre acessivel. Essa essencia nunca mudara. O usuario precisa acessar 
a informa<;ao sem bloqueios, de forma rapida, facil e consistente. Esteja 
preparado. O futuro esta mais proximo do que voce imagina. 


Os desenvolvedores precisam acordar 

O desenvolvimento web depende de tres personagens principais: W3C, 
que regulamenta, cria e sanciona padroes para a web. Os browsers, que 
importam essas regras e padroes de forma que a web seja mais homogenea. E 
os desenvolvedores, que possibilitam a cria^ao e publica^ao de conteudo em 
videos, texto, imagem etc. 


HTML5 e CSS3 com Farinha e Pimenta 


Cada um destes personagens tem papeis importantes para que a evolu^ao da 
web possa se tornar forte, traqando novos caminhos, cobrindo as necessidades 
atuais dos usuarios e prevendo necessidades e soluqoes futuras. Ha um ciclo 
para que estes personagens possam cumprir com seus objetivos. 

O W3C cuida dos padroes. Ele tem ideias, ele preve problemas e tenta 
soluciona-los. O W3C nao aplica, ele apenas planeja. E um trabalho dificil, 
por que e necessario uma visao muito apurada do cenario da web para 
saber quais caminhos ela devera tomar. Uma decisao errada, pode acarretar 
problemas que levarao anos para serem solucionados por completo. Vide o 
desenvolvimento com tabelas. Por isso esse trabalho de planejamento deve 
ser meticuloso. Devo confessar que em muitos casos o W3C nao supera as 
expectativas e faz com que iniciativas paralelas surjam e direcionem a Web 
para um caminho mais correto. Foi o que aconteceu com o HTML5. 

Os browsers, por sua vez, precisam entender e adotar as ideias do W3C, 
absorvendo as soluqoes e criando suporte nos seus softwares. Esse trabalho 
tambem tem seus perigos. Os browsers precisam pesquisar quais das 
necessidades dos desenvolvedores e mais importante e assim implementa- 
la para que a utiliza^ao de projetos seja executada. Obviamente que alguns 
decidem suportar aquelas solu^oes que darao mais pontos estrategicos contra 
o concorrente. 

Finalizando o ciclo, os desenvolvedores aplicam tudo o W3C define, mas 
apenas aquilo que os browsers “querem” ou podem suportar. E isso, claro, faz 
com que o desenvolvedor se depare com problemas na ponta produ^ao. Vide 
o IE6/7/8 e nossos problemas de cada dia. 

Durante muito tempo, esse ciclo nao era afinado. Havia uma certa confusao 
e um jogo de interesses proprios envolvendo principalmente os browsers. 
O W3C estava apenas pensando em como resolver problemas que talvez 
existiriam daqui longos anos. Os browsers estavam apenas interessados 
em criar uma massa de usuarios suficiente para ser o primeiro no ranking. 
Os desenvolvedores, por sua vez, queriam ganhar seu dinheirinho, fazer o 
trabalho, entregar pro cliente e acabar com o problema. 


Como sera? 


Ninguem deu aten^ao quando come^amos a desenvolver com tabelas, 
fazendo com que os sites ficassem mais pesados, aumentando o tempo de 
desenvolvimento e o custo do projeto. 

Este ciclo defeituoso foi praticado durante muito tempo. Por incrivel que 
pare<;a, foram os desenvolvedores que come^aram a fazer o ciclo funcionar 
novamente como deveria. Eles acordaram os fabricantes de browsers e 
tambem o W3C. 

O W3C passou a pensar mais em problemas presentes. Solucionou problemas 
iminentes e que entregavam valor para os projetos. 

Os browsers suportaram o mais rapido possivel essas mudan^as, atualizando 
seus engines, e fortalecendo as bases para novas solu^oes e flexibiliza^oes 
posteriores. 

Ja os desenvolvedores estagnaram. Desculpe-me, serei um pouco revoltado 
daqui para frente. Os desenvolvedores dormiram. Quando o W3C e os 
browsers apresentaram sohnpoes para problemas como transparency, bordas 
arredondadas, backgrounds inteligentes, utibza^ao de fonts remotas e etc, os 
desenvolvedores resolveram que nao era a hora dessas solu^oes por causa da 
retrocompatibilidade com browsers antigos, como o IE6. Na verdade estou 
sendo meio injusto aqui. Nao foram todos os desenvolvedores que criaram 
caso com a retrocompatibilidade, foram somente os idiotas. 

Nos reclamavamos que precisavamos de recursos mais inteligentes 
para trabalhar. Que precisavamos de ideias realmente inovadoras, que 
transformassem os projetos e facilitassem o desenvolvimento. Protestamos, 
escrevemos manifestos, postamos em nossos blogs revoltados com a falta 
de visao do W3C e com a pobreza do suporte dos browsers. E quando 
conseguimos o que queriamos, demos para tras. Amarelamos. Pedimos 
arrego. 

Infelizmente, via-se muito disso aqui no Brasil do que no resto do mundo. 
Ouvi muitas desculpas como: - “Mas meu cliente usa IE6.” ou “Mas isso nao 
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funciona em IE6.” Voce e desenvolvedor. Voce trata com seu cliente todos os 
dias. Voce tem o poder de educar e convencer. E se voce acha que nao tem 
poder nenhum, por que ainda trabalha com web? 

Talvez isso seja trauma do passado. Talvez nao. O fato e que nao podemos 
mais nivelar por banco. Isso e atrasar uma “evolu^ao” inteira. 

Tenho incansavelmente falado sobre Graceful Degradation, Enhanced 
Progressive, HTML 5, as maravilhas do CSS 3 e etc, pois esse e o assunto 
que rola la fora. Ha desenvolvedores e empresas, que acham que devemos ter 
uma autoriza^ao especial dos gringos para utilizarmos novas tecnologias e 
principalmente para deixar os browsers antigos no passado. 

Esse assunto me faz pensar em outra pergunta: Estamos (voce esta?) 
preparados para o ritmo alucinante do W3C e dos browsers? 

Ate a Microsoft esta cumprindo com a palavra de ter um browser atualizado. 
Eles ja anunciaram o novissimo Internet Explorer 10, com uma serie de 
atualiza<;6es que promete trazer o IE para o patamar de browsers atuais. 

O mercado de client-side se transformara rapidamente nos proximos anos. 
Muitas mudan^as no HTML e no CSS serao publicadas com o intuito de 
tornar a web mais uniforme, flexivel e portavel. O HTML 5 nao e so uma 
cole^ao de novas tags e APIs. O CSS 3 nao ganhou so bordas arredondadas. 
E nem so de iPhone vive o homem. Existem milhares de Nokias, Blackberrys, 
Windows Phones e Androids por ai. 


Os desenvolvedores precisam acordar. 
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